[lexical-website] Feature: ui improvement in the homepage of lexical.dev

[m-santanna]

Description

This is my implementation of the #3567 issue, where I tried my best to follow @ixahmedxi 's design, but also changed a few things.

Aside from the navbar and footer (which are available on all routes), the only route effectively changed was the root one. Other routes, such as /gallery and /community were not changed, and may need future adjustments to keep the overall style of the app.

Navbar

The navbar was the longest to change since it is tightly coupled with docusaurus, and figuring out the classes and behaviours took some time. With that said, I added a navbar.css file, with all the changes to the classes there.

The dark mode navbar has a border on the /api and /docs routes, but doesn't have one on the homepage and other routes. I felt like the border didn't look that good on those pages, so I removed it. The light mode navbar has the border on all routes.

Footer

The footer was heavily changed from the original design and now only has the copyright and the legal links. I argue that this minimal approach looks the cleanest. The docs can always be accessed through the navbar, and the community links can be found on the homepage and on the community route.

Test plan

The general flow, responsiveness for phones and tablets, and light/dark mode, were all tested locally, and are working well and looking good (in my opinion).

lexical-after.mov

Relevant

I personally think there is a lot of text on the minimal setup section. I would like to submit another PR with a different implementation of this section, where we only leave the codeblock and the action button below.

If you guys have any questions, critiques or suggestions, please let me know.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
lexical	Ready	Preview, Comment	Mar 17, 2026 2:31pm
lexical-playground	Ready	Preview, Comment	Mar 17, 2026 2:31pm

[zurfyx]

Thank you Matheus! We appreciate your work on the site, this is actually one of these that we've had on the back of our minds for some time but never took action.

This will make me sound old-school but this is one of those PRs that we would rather have reviewed carefully, this is home of the project. There are some key content decisions that are largely influential on how we want community to perceive and understand the project. This is not an exhaustive list I've compiled with @etrepum:

• Lexical is a framework that enables text editing, it caters both small form chat apps such as WhatsApp and larger form such as the Ghost or even the Proton collaborative rich text editor. To showcase this it would make sense to display variants. Not only that but also have to embedded (interactive) on the homepage. An image gives the impression that the editor is rather hard to set up, and then the tree view should be seen as an addOn as opposed to the default experience.
• Community lives primarily in Discord, we would probably want to emphasize that. GitHub holds some value but at times where folks primarily develop with LLMs, GitHub's value is primarily for releases and development. Hence, we'd rather double down on these key features as opposed to advertising GitHub as a whole, and there may be better ways to showcase these.
• Lexical is composable, and it does come with a lot of pluggable extensions. Because we want to Lexical to be as lean as possible, there's only so much we can bundle out of the box but we think this is extremely value and should be advertised and promoted better (Gallery was an attempt to do so).
• AI is top of mind for many of us now across industries. Lexical can do AI but examples speak better than words, can we showcase this?

As for next steps, we can choose to iterate on this until we're comfortable with the visuals or move it to a more formal discussion (a proposition based on research -- Discord can be particularly helpful for this community value). In any case, thanks again!

[m-santanna]

Hello Gerard! Thank you for the feedback. I completely agree with you that this needs to be reviewed with care. I saw the issue #3567 was still open, so I took action. Looking back, i should've gather more information, since the issue and the ui proposed were from 2022. Either way, I would love to discuss further the enhancement of the site.

I am gonna write my key ideas here, but if you think it is worth moving it to discord, let me know.

• Regarding the Image placed on the landing hero, I totally agree. I plan on switching it with a Rich Text editor. I actually was already messing around with it. This is how it currently looks like:

• Regarding the Community section, I think it makes sense. We can have discord alone on that section. I was thinking about moving github to the right side of the navbar (close to the theme switcher) as an icon, and adding twitter and discord too, with a similar style.
• I also want to replace the current HomepageSetup component with two examples of how to use Lexical (plain javascript and with react). I want to have a "code editor" in each of these sections, with 3 tabs open. One for the theme.css, one for the editor component and one for the index. Near the code, it will be cool to have these editors embedded too. Do you think this is "enough"? I was planning on basically copying the already built examples from the current landing page.

If you have anything to add, suggest or change, let me know. Thank you for taking the time to review.