Tailwind Editor screenshot

Tailwind Editor

Author Avatar Theme by Fouita
Updated: 24 Apr 2024
414 Stars

notion like tailwindcss editor built with svelte

Categories

Overview:

Tailwind Editor is a Svelte component that allows users to generate Tailwindcss HTML from a Notion-like WYSIWYG editor. However, it is important to note that this component is still under development and should not be used in production yet.

Features:

  • Import and use in a Svelte project: Users can easily import and use the Tailwind Editor component in their Svelte projects.
  • Custom HTML addition: Users have the option to add custom HTML when loading the component by passing an array of elements.
  • TODO List: The component has a todo list that outlines upcoming features, including embedded media, lists, drag and drop positions, and a code highlighter with Tailwindcss support.
  • Contribution: The project welcomes contributions from the community.

Installation:

In order to use Tailwind Editor in a Svelte project, you first need to have Tailwind installed or imported. Then, follow the steps below:

  1. Import the Tailwind Editor component into your project.
  2. Add the initial HTML by passing an array of elements if desired.

Here’s an example of how the installation process might look:

import TailwindEditor from 'tailwind-editor'
import 'tailwindcss/dist/tailwind.min.css'

// ...

<TailwindEditor 
  initialHtml={[<p>Hello, World!</p>]}
/>

Summary:

Tailwind Editor is a Svelte component that allows users to generate Tailwindcss HTML using a Notion-like WYSIWYG editor. Although it is currently under development and not recommended for production use, it offers features such as easy integration into Svelte projects, the ability to add custom HTML, and plans for additional features in the future. Contributions are also welcome for this project.