[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 30, 2026 0:01am
lexical-playground	Ready	Preview, Comment	Mar 30, 2026 0:01am

[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!

[etrepum]

Chat fix looks good, I did just notice another small nit in that example - the chat input changes width when the first character is entered. Should be fixed size (full width)

[etrepum]

Thank you for all of your hard work and persistence on this! The new homepage looks and works great, and does a much better job showing off lexical's flexibility with the new in-line examples. I discussed this PR with some of the other maintainers and everyone agrees that this is "looking very good!" (direct quote) so we're happy to merge this now 🚀

[zurfyx]

Thank you Matheus for your hard work on the landing site and your multiple iterations to curate it! This is a major upgrade, from a site powered by stackblitz, to actual inline examples that folks can play with from the get go. This undoubtedly helps educate new-joiners faster about Lexical's capabilities and reinforces Lexical's vision. (and thanks @etrepum for driving these conversations!)

[etrepum]

(Going to wait until the e2e test suite completes and I get back from dinner before merging, but I don't expect any failures)

[m-santanna]

Thank you for the kind words!

I learned a ton! Not just technically, but also how to think through the user experience, and what it means to communicate a project's vision. Really happy to be able to contribute!

A special thanks to @etrepum for the incredible engagement and feedback throughout this process. Looking forward to contributing more in the future!