Novella-svelte NPM

Novella Svelte

Heavily biased Notion-style WYSIWYG editor without the bells and whistles. I'm maintaining this for my upcoming blogging website called BrainDead.

Based on Novel

Forked from Novel-Svelte

Made for BrainDead

Techs and Works

Svelte
Tiptap
Tailwind CSS

Usage

Set up your Svelte project.
Install novella-svelte

npm i novella-svelte

Import and Use

<script>
	import { Editor } from 'novella-svelte';

	let saveStatus = 'Saved';
	let editor;
</script>

<main>
	<Editor
		bind:editor
		onUpdate={() => {
			saveStatus = 'Unsaved';
		}}
		onDebouncedUpdate={() => {
			saveStatus = 'Saving...';
			// Saving code go here
			saveStatus = 'Saved';
		}}
	>
		<div>
			{saveStatus}
		</div>
	</Editor>
</main>

Development Installation

Install Node.js and npm. Download them here.
Clone the repo

git clone https://github.com/TGlide/novel-svelte.git
cd novel-svelte

Install npm packages:

npm install

Start vite server:

npm run dev

Go to http://localhost:5173/ to view the preview.