← Back to Home

Examples

Explore different ways to use OverType in your projects

Basic Usage

Simple editor setup with default configuration. Perfect for getting started.

Beginner

Custom Toolbar

Customize the toolbar with your own buttons, separators, and actions.

Toolbar

Custom Theme

Create your own color theme or customize existing themes.

Theming

Dynamic Editing

Programmatically control editor content and options.

API

Web Component

Use the native <overtype-editor> custom element with Shadow DOM.

Web Components

Shiki Integration

Beautiful syntax highlighting for code blocks using Shiki.

Highlighting

Highlight.js Integration

Syntax highlighting for code blocks using Highlight.js.

Highlighting

Custom Syntax

Extend markdown with footnotes, directives, hashtags, mentions, and more.

Extensibility