novel VS tailwindcss-typography

novel editor based on TipTap

The difference is I am gonna let users write notion like documents and then share it, unlike pastebin which only lets us share text. For writing documents, I'm gonna use Novel.sh. It is a WYSIWYG editor which provides interface and features similar to Notion. It also lets us use OpenAI API to integrate AI into it.

Probably tiptap.dev, here's a notion-like editor built with it: https://github.com/steven-tey/novel

I love the simplicity of it tbh, the homepage with it's builtin demo is just superb.

https://novel.sh/

Write ++ after the npm install or whatever, the homepage is an editable demo of the editor.

Tiptap is incredible! Built https://novel.sh/ with it and the extensiveness & API is chefs kiss! So proud of you guys and the YC funding is truly well-deserved! Congrats again!

Great guide. One thing that seems to be missing is something I see in a lot of README's: a list of the core tech stack being used in the repo. Good examples here https://github.com/undb-xyz/undb#-tech-stack and here https://github.com/steven-tey/novel#tech-stack. Did you already consider adding this as part of the guide and decide against it, or was it just not something you thought to add?

I'm trying to customize https://github.com/steven-tey/novel 's amazing template. but currently output stream comes in plain text. and even it gives markdown or HTML code the text editor doesn't render them accordingly.

To enable viewing MDX files in our app, lets install MDX. We should also install our other helper which is tailwindcss/typography as a dev dependency. This'll be useful later for auto styling the blog post.

3. Setup react-markdown and @tailwindcss/typography

The typography plugin which comes out of tailwind gives a clean readable experience in my opinion. https://tailwindcss.com/docs/typography-plugin

This is the text before the plugin: This is the text after applying the plugin: You can play with the demo here, and check out more ways to use it in the Typography documentation.

2. Use typography plugin

We've been using https://tailwindcss.com/docs/typography-plugin with Tiptap and it's worked great so far.

While we could have used the Tailwind CSS Typography plugin, we chose this solution to have more control over the tag styles and avoid overriding the plugin’s default styles. Since this demo utilizes only a few elements, this choice is appropriate.

Are you talking about Typography? If yes, that's what I'm using to pretty-print the HTML, which was generated using the above technique.

i also mostly cannot change layout since i use @tailwind/typography which requires a specific layout.

Before rendering the BlogPost, we can also style some of it using Tailwind Typography