https://github.com/umaranis/svelte-lexical

Rich text editor for Svelte based on lexical
https://github.com/umaranis/svelte-lexical

component lexical rich-text-editor svelte

Last synced: 11 days ago
JSON representation

Rich text editor for Svelte based on lexical

• Host: GitHub
• URL: https://github.com/umaranis/svelte-lexical
• Owner: umaranis
• License: mit
• Created: 2022-04-19T12:03:36.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2025-04-11T09:39:56.000Z (14 days ago)
• Last Synced: 2025-04-11T11:46:06.687Z (14 days ago)
• Topics: component, lexical, rich-text-editor, svelte
• Language: Svelte
• Homepage: https://svelte-lexical.vercel.app
• Size: 7.93 MB
• Stars: 443
• Watchers: 10
• Forks: 40
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![Build](https://github.com/umaranis/svelte-lexical/actions/workflows/build.yml/badge.svg)](https://github.com/umaranis/svelte-lexical/actions/workflows/build.yml)

[![E2E Tests](https://github.com/umaranis/svelte-lexical/actions/workflows/tests.yml/badge.svg)](https://github.com/umaranis/svelte-lexical/actions/workflows/tests.yml)

[![npm version](https://img.shields.io/npm/v/svelte-lexical?logo=npm)](https://www.npmjs.com/package/svelte-lexical)

[//]: # ()

# svelte-lexical

A rich-text editor for Svelte based on [Lexical](https://lexical.dev/)

Lexical is an extensible text editor framework developed by awesome developers at Facebook. The purpose of this project is to provide Svelte bindings for Lexical and also develop high-level components using Lexical.

![Screenshot-Svelte-Lexical](docs/images/editor-image.webp)

## Getting Started

Pick one of the demo projects to understand how `svelte-lexical` can be incorporated into your project. For instance, use `demos/sveltekit` for a SvelteKit and `demos/playground` for Svelte.

To run the demo project:

- First build `svelte-lexical` library

  - change directory: `cd packages/svelte-lexical`

  - install dependencies: `pnpm i`

  - build the lib: `pnpm build`

- Run the demo project

  - change directory: `cd ../../demos/playground`

  - run dev: `pnpm dev`

## Development Notes

- This project is set up as a monorepo using pnpm workspaces.

- To run a demo in development, execute `pnpm -C demos/playground dev`.

- ESLint is set up for VS Code.

- The npm package is automatically published on creation of a GitHub release using GitHub Actions.

- Unit testing is set up for the svelte-lexical package using Jest and Testing Library.

- E2E testing is set up for the playground package using Playwright.

- [Size Limit](https://github.com/ai/size-limit) controls the library size.

## Plugins

Most of the `svelte-lexical` functionality is implemented through plugins. See the [list of plugins here](docs/plugins/readme.md).