https://github.com/fouita/tailwind-editor

notion like tailwindcss editor built with svelte
https://github.com/fouita/tailwind-editor

fouita notion svelte tailwind-editor tailwindcss wysiwyg-editor

Last synced: 16 days ago
JSON representation

notion like tailwindcss editor built with svelte

• Host: GitHub
• URL: https://github.com/fouita/tailwind-editor
• Owner: fouita
• License: mit
• Created: 2020-09-07T13:59:30.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2024-04-24T14:16:37.000Z (3 months ago)
• Last Synced: 2024-04-24T17:32:53.543Z (3 months ago)
• Topics: fouita, notion, svelte, tailwind-editor, tailwindcss, wysiwyg-editor
• Language: Svelte
• Homepage: https://editor-tw.fouita.com/
• Size: 154 KB
• Stars: 372
• Watchers: 20
• Forks: 31
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• my-awesome-stars - fouita/tailwind-editor - notion like tailwindcss editor built with svelte (Svelte)
• awesome-stars - fouita/tailwind-editor - notion like tailwindcss editor built with svelte (Svelte)
• awesome-stars - tailwind-editor
• awesome - fouita/tailwind-editor - notion like tailwindcss editor built with svelte (Svelte)

README

        
## Tailwind Editor 

Svelte component to generate tailwindcss html from a notion like wysiwyg editor.

This component is under development, don't use it in production yet!

![svelte tailwind wysiwyg editor](https://cdn.fouita.com/assets/fouita/images/editor-sh1.png)

## Installation

```bash

$npm i tailwind-editor

```

Import to use in a [svelte](https://svelte.dev) project, you need also [tailwind](tailwindcss.com) installed (or imported) in order for this to work

```html

    import Editor from 'tailwind-editor'

    let html = ''



    

    


        {html}

    



```


## Add initial HTML

If you want to add custom html when you load the component you can pass an array of elements like the following

*this is not recommended if the code is not previously generated by the editor*

```html

    import Editor from 'tailwind-editor'

    let arr_html = [

        {html: 'Hello <span class="font-bold">world!</span>', klass: 'p-2 text-3xl'}

    ]

    let html = ''

```

## TODO

1. [ ] embed media (image, video)

2. [ ] add lists

3. [ ] drag and drop positions

4. [ ] code highlighter with tailwindcss

## Contribution

All contribution are welcome!

## About

[Fouita : UI framework for svelte + tailwind components](https://fouita.com)