# SVAR Svelte Editor
[](https://www.npmjs.com/package/@svar-ui/svelte-editor)
[](https://github.com/svar-widgets/editor/blob/main/license.txt)
[](https://www.npmjs.com/package/@svar-ui/svelte-editor)
[Website](https://svar.dev/svelte/editor/) • [Documentation](https://docs.svar.dev/svelte/editor/) • [Demos](https://docs.svar.dev/svelte/editor/samples/#/base/willow)
**SVAR Svelte Editor** is an intuitive Svelte component for creating content editing forms to manage data within UI elements on a page. You can use it for editing structured data like table rows, informational cards, blocks with text, etc.
### :sparkles: Key features:
- **Flexible display options**: open the editor in a modal popup or as a seamless sidebar for convenient access.
- **Multiple input types**: Use various input fields like text inputs, checkboxes, date pickers, sliders, and more controls from [SVAR Svelte Core](https://svar.dev/svelte/core/) library.
- **Built-in validation**: Includes basic validation for required fields and supports custom validation rules for advanced scenarios.
- **Flexible save options**: Choose between manual saves, auto-save, or custom saving logic adjusted to your needs.
- **Comments section**: You can add a nice-looking comments section to give your users the ability to communicate.
- **Compact layout**: Organize forms into expandable sections or a 2-column layout for efficient use of screen space.
- **TypeScript support**: fully typed for safe and seamless integration.
### :hammer_and_wrench: How to Use
To use the Editor, simply import the package and include the component in your Svelte file:
```svelte
```
For more details, visit the [getting started guide](https://docs.svar.dev/svelte/editor/getting_started/).
### :gear: How to Modify
Typically, you don't need to modify the code. However, if you wish to do so, follow these steps:
1. Run `yarn` to install dependencies. Note that this project is a monorepo using `yarn` workspaces, so npm will not work
2. Start the project in development mode with `yarn start`
### :white_check_mark: Run Tests
To run the test:
1. Start the test examples with:
```sh
yarn start:tests
```
2. In a separate console, run the end-to-end tests with:
```sh
yarn test:cypress
```
