Ink

The flexible TypeScript Markdown editor that powers https://octo.app.

Features

• [x] Automatic, dark, or light themes (automatic by default)
• [x] Hybrid plain-text Markdown rendering
• [x] Supports GitHub Flavored Markdown (an extension of CommonMark)
• [x] Syntax highlighting for many common languages (in code blocks)
• [x] Drag-and-drop or paste to upload files
• [x] Inline Markdown image previews
• [x] Configurable and stylable
• [x] An optional formatting toolbar (great for mobile)
• [x] Vim Mode

How to install

Ink is written in TypeScript and provides both ES and UMD packages.

Yarn

yarn add @writewithocto/ink

NPM

npm install --save @writewithocto/ink

How to get started

There are many ways to customize Ink to fit your needs. Here are a few examples to get you started.

Minimal setup

Mount the component and start writing.

// ./examples/minimal.ts

import ink from '@writewithocto/ink'

// The only requirement is an HTML element.
ink(document.getElementById('editor')!)

Track state changes with hooks

To sync the editor with your app's state, you can use the afterUpdate hook.

// ./examples/hooks.ts

import { defineOptions, ink } from '@writewithocto/ink'

// With hooks, you can keep your state in sync with the editor.
const state = { doc: '# Start with some text' }

// Use defineOptions for automatic type hinting.
const options = defineOptions({
  doc: state.doc,
  hooks: {
    afterUpdate: (doc: string) => {
      state.doc = doc
    },
  },
})

const editor = ink(document.getElementById('editor')!, options)

// You can also update the editor directly.
editor.update(state.doc)

Futher customization

Appearance

Many aspects of the editor's appearance can be customized with CSS custom properties (aka CSS variables).

General-purpose styles

Block styles

Blocks are used to provide a dynamic user experience. Examples of blocks are images, multiline code blocks, and the toolbar.

Code styles

These styles are for code blocks and inline code.

Syntax highlighting

You can customize the entire syntax theme too.

Support

Your support is appreciated. Here are some ways you can help. ♥️

Leave the Attribution enabled

There is a small Powered by Ink attribution in the bottom-right corner of all Ink instances by default. Ink is a free MIT-licensed library under independent development, and that attribution helps to increase awareness of this project.

Tell us what you think

Your feedback is immensely important for building Ink into a library that we all love. Consider starting a discussion under Octo if you have a question or just want to chat about ideas!

Open a Pull Request

If you feel comfortable with an existing issue, please consider opening a Pull Request. I would love to work with you to get it merged!

Become a financial backer

• GitHub Sponsors
• Patreon
• Ko-Fi
• Buy Me a Coffee