Framework-agnostic core for Vizel block-based Markdown editor built on Tiptap
npm install @vizel/coreFramework-agnostic core for Vizel block-based Markdown editor built on Tiptap.
``bash`
npm install @vizel/core
This package provides:
- Tiptap extensions for block-based editing
- Type definitions shared across framework packages
- Utility functions for editor configuration
- CSS styles for editor components
- Auto-save, theme, collaboration, comments, and version history utilities
- Plugin system for extending functionality
| Category | Examples |
|----------|---------|
| Types | VizelEditorOptions, VizelFeatureOptions, VizelEditorState, VizelSlashCommandItem |createVizelExtensions()
| Extensions | , resolveVizelFeatures() |getVizelEditorState()
| Utilities | , getVizelMarkdown(), createVizelImageUploader() |VIZEL_DEFAULT_THEME
| Theme | , resolveVizelTheme() |createVizelAutoSaveHandlers()
| Auto-save | |createVizelCollaborationHandlers()
| Collaboration | |createVizelCommentHandlers()
| Comments | |createVizelVersionHistoryHandlers()
| Version History | |VizelPluginManager
| Plugin System | , validateVizelPlugin() |VIZEL_TEXT_COLORS
| Constants | , VIZEL_HIGHLIGHT_COLORS, vizelDefaultSlashCommands |
| Import | Description |
|--------|-------------|
| @vizel/core/styles.css | Full stylesheet (CSS variables + component styles) |@vizel/core/components.css
| | Component styles only (for shadcn/ui integration) |@vizel/core/mathematics.css
| | KaTeX styles for math rendering |
All extensions are enabled by default except collaboration and comment:
| Extension | Description |
|-----------|-------------|
| Base | Headings, bold, italic, underline, strikethrough, lists, blockquotes |
| SlashCommand | Type / to open command menu |[[page-name]]
| Table | Table editing with row/column controls |
| Link | Autolink and paste URL detection |
| Image | Upload, paste, drag-and-drop, resize |
| CodeBlock | Syntax highlighting with lowlight (37+ languages) |
| CharacterCount | Real-time character and word count |
| TextColor | Text color and highlight |
| TaskList | Checkbox task lists |
| DragHandle | Block drag handle and Alt+Arrow keyboard shortcuts |
| Markdown | Import/export with GitHub Flavored Markdown |
| Mathematics | LaTeX equations with KaTeX |
| Embed | oEmbed/OGP URL embedding |
| Details | Collapsible content blocks |
| Diagram | Mermaid and GraphViz diagrams |
| WikiLink | internal linking |
| Comment | Text annotations for collaborative review |
This package is used as a dependency of framework-specific packages:
- @vizel/react - React 19 components and hooks@vizel/vue
- - Vue 3 components and composables@vizel/svelte
- - Svelte 5 components and runes
`typescript
import { resolveVizelFeatures, createVizelImageUploader } from '@vizel/core';
import type { VizelEditorOptions, VizelFeatureOptions } from '@vizel/core';
// Import styles
import '@vizel/core/styles.css';
``
See the main repository for full documentation.
MIT