Getting Started

You can get started by using one of the demo projects or following the quick start to add svelte-lexical to your existing project.

Quick Start

To add svelte-lexical to your project, run the following command:
Terminal window
```
pnpm add svelte-lexical
```
Import the RichTextComposer component in your Svelte component or page:
+page.svelte
```
<script>
  import {RichTextComposer} from 'svelte-lexical';
</script>
```

Import the default theme in your Svelte component or page:

<script>
  import {RichTextComposer} from 'svelte-lexical';
  import {theme} from 'svelte-lexical/dist/themes/default';
</script>

Use the RichTextComposer component in your Svelte component or page:

<script>
  import {RichTextComposer} from 'svelte-lexical';
  import {theme} from 'svelte-lexical/dist/themes/default';
</script>

<RichTextComposer {theme} />

Add the icons used by the toolbar and dialogs in your application:

Copy the icons folder from the svelte-lexical package to your project’s static/images folder.

Your folder structure should look like this:
- svelte.config.js
- package.json
- src
- Directorystatic
  - Directoryimages
    Directoryicons
    arrow-clockwise.svg
    add-sign.svg
    bold.svg
    camera.svg
    …
The static folder could also be called public depending on your project’s configuration.
Note
You can download the icons using command line by running the below command from project root.
Terminal window
curl -s https://api.github.com/repos/umaranis/svelte-lexical/contents/packages/svelte-lexical/static/images/icons \ | grep 'download_url' | cut -d '"' -f 4 | xargs -I {} wget -P static/images/icons {}

Use a demo project to get started

svelte-lexical has a few demo projects to cover different use cases. You can pick one of the following as your starting point:

richtext-editor: A basic implementation using the pre-built rich text editor. (Framework: Svelte)
sveltekit: A custom built rich text editor and the toolbar using the default theme. (Framework: SvelteKit)
playground: A comprehensive demo with most of the features. (Framework: Svelte)
- Showcases most of the features of the library
- Defines a custom UI theme for the editor and the shell
- Includes Dev Tools for troubleshooting
- Includes e2e tests