Repository files navigation

Carta is alightweight,fast andextensible Svelte Markdown editor and viewer. It is powered byunified,remark andrehype. Check out theexamples to see it in action.Differently from most editors, Carta does not include a code editor, but it isjust a textarea with syntax highlighting, shortcuts and more.

• 🌈 Markdown syntax highlighting (Shiki);
• 🛠️ Toolbar (extensible);
• ⌨️ Keyboardshortcuts (extensible);
• 📦 Supports150+ plugins thanks to remark;
• 🔀 Scroll sync;
• ✅ Accessibility friendly;
• 🖥️SSR compatible;
• ⚗️KaTeX support (plugin);
• 🔨Slash commands (plugin);
• 😄Emojis, with included search (plugin);
• ✏️TikZ support (plugin);
• 📂Attachment support (plugin);
• ⚓Anchor links in headings (plugin);
• 🌈 Code blockssyntax highlighting (plugin);
• ⚙️ EmbedComponents (plugin).

Package	Status	Docs
carta-md		/
plugin-math		/plugins/math
plugin-code		/plugins/code
plugin-emoji		/plugins/emoji
plugin-slash		/plugins/slash
plugin-tikz		/plugins/tikz
plugin-attachment		/plugins/attachment
plugin-anchor		/plugins/anchor
plugin-component		/plugins/component

Core package:

npm i carta-md

Plugins:

npm i @cartamd/plugin-name

<scriptlang="ts">import {Carta,MarkdownEditor }from'carta-md';// Component default themeimport'carta-md/default.css';const carta=newCarta({// Remember to use a sanitizer to prevent XSS attacks// sanitizer: mySanitizer});let value=$state('');</script><MarkdownEditorbind:value {carta} /><style>/* Or in global stylesheet*//* Set your monospace font*//* Required to have the editor working correctly!*/:global(.carta-font-code) {font-family:'...',monospace;font-size:1.1rem;line-height:1.1rem;letter-spacing:normal;}</style>

You can reduce the server-side bundle by using the following vite config. This will remove shiki from the bundle. It may cause issues if you try to useplugin-code on the server, as the highlighter is no longer present there.

// vite.config.jsimport{sveltekit}from'@sveltejs/kit/vite';/**@type {import('vite').UserConfig} */constconfig={plugins:[sveltekit()],define:{__ENABLE_CARTA_SSR_HIGHLIGHTER__:false}};exportdefaultconfig;

For the full documentation, examples, guides and more checkout thewebsite.

• Introduction
• Examples
• Getting Started
• Editing Styles
• Plugins:
  • Math
  • Code
  • Emoji
  • Slash
  • TikZ
  • Attachment
  • Anchor
  • Component
• API:
  • Utilities
  • Core
  • Extension

Every contribution is well accepted. If you have a feature request you can open a new issue.

This package uses apnpm workspace, so pnpm is required to download and put everything together properly.

This repository iscommitizen friendly. To commit use:

npm run commit# or, if you have commitizen installed globallygit cz

If you want to preview the docs:

cd docsnpm run dev