Notice: This project has been merged into the upstream writewithocto/ink package. Please use that package instead.

vue-ink

The flexible TypeScript Markdown editor that powers octo.app - packaged as a Vue 3 component. You can also check out the framework-agnostic package at writewithocto/ink.

Features

• [x] Dark and light themes
• [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

Install the package

# yarn
yarn add @writewithocto/vue-ink

# npm
npm install --save @writewithocto/vue-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

<template>
  <Ink v-model="markdown" />
</template>

<script lang="ts" setup>
import Ink from '@writewithocto/vue-ink'
import { ref } from 'vue'

const markdown = ref('# Hello, World!')
</script>

Configuration options

The options prop is an Ink.Options object.

<template>
  <input v-model="options.interface.appearance" type="radio" value="dark"> dark
  <input v-model="options.interface.appearance" type="radio" value="light"> light
  <Ink v-model="markdown" :options="options" />
</template>

<script lang="ts" setup>
import Ink from '@writewithocto/vue-ink'
import { reactive, ref } from 'vue'

const markdown = ref('# Hello, World!')
const options = reactive({
  interface: {
    appearance: 'dark',
  },
})
</script>

Contributing

This library uses yarn.

Install dependencies

yarn install

Compile and hot-reload for development

yarn dev

Compile for production

yarn build

Support

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

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!

Become a financial backer

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