Idaztian

A live-preview markdown editor framework for the web. Embed an Obsidian-style editing experience in any web application.

GitHub Live Demo
Idaztian editor showing live-preview markdown with rendered tables, code blocks, alerts, task lists, and math

Everything you need

Idaztian packs a complete markdown editing toolkit

Live Preview

Move your cursor onto any formatted element to reveal its raw markdown syntax. Move away and it renders beautifully — just like Obsidian.

Block Widgets

Tables, code blocks, horizontal rules, blockquotes, and alert callouts — all rendered as rich, interactive widgets with full editing support.

Smart Editing

Auto-closing pairs that respect code context, smart list continuation, paste HTML conversion, drag-and-drop file import, and a context-aware toolbar.

Math Rendering

Inline and block LaTeX math via KaTeX with true live-preview — cursor away shows rendered equations, cursor on reveals raw syntax.

Dark & Light Themes

Carefully crafted themes with proper editor chrome styling. Dark mode that feels native, and a clean light variant for document editing.

AI Autocompletion

Copilot-style ghost text completions via any OpenAI-compatible API. Pluggable provider — wire up OpenAI, Ollama, or your own backend. Tab to accept.

Framework-Agnostic

Built on CodeMirror 6. Works with React, Vue, Svelte, vanilla JS — any web stack. Just pass a DOM element and get a full editor.

Get started in seconds

Install via npm and initialize with a few lines

# Install the package
npm install idaztian
<!-- Add to your HTML -->
<link rel="stylesheet" href="https://xezpeleta.github.io/Idaztian/packages/idaztian/dist/idaztian.css" />
<script type="module">
import { IdaztianEditor } from 'https://xezpeleta.github.io/Idaztian/packages/idaztian/dist/idaztian.js'
</script>

Three lines to an editor

No boilerplate, no configuration objects required

app.ts
import { IdaztianEditor } from 'idaztian';
import 'idaztian/style.css';

new IdaztianEditor({
  parent: document.getElementById('editor'),
  initialContent: '# Hello World',
  toolbar: true,
});