https://github.com/nowely/marked-input

Сombine editable text with any component via annotations.
https://github.com/nowely/marked-input

component highlight input javascript markup mention overlay react suggestion typescript ui

Last synced: 2 months ago
JSON representation

Сombine editable text with any component via annotations.

• Host: GitHub
• URL: https://github.com/nowely/marked-input
• Owner: Nowely
• License: mit
• Created: 2022-04-18T02:13:52.000Z (about 4 years ago)
• Default Branch: next
• Last Pushed: 2026-03-06T22:58:54.000Z (4 months ago)
• Last Synced: 2026-03-07T04:06:28.418Z (4 months ago)
• Topics: component, highlight, input, javascript, markup, mention, overlay, react, suggestion, typescript, ui
• Language: TypeScript
• Homepage: https://markput.vercel.app
• Size: 3.92 MB
• Stars: 11
• Watchers: 1
• Forks: 2
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# [Marked Input](https://marked-input.vercel.app)

[![npm version](https://img.shields.io/npm/v/@markput/react.svg?style=flat&label=react)](https://www.npmjs.com/package/@markput/react) [![min zipped size](https://img.shields.io/bundlephobia/minzip/@markput/react?label=react+gzip)](https://bundlephobia.com/package/@markput/react) [![React Storybook](https://gw.alipayobjects.com/mdn/ob_info/afts/img/A*CQXNTZfK1vwAAAAAAAAAAABjAQAAAQ/original)](https://markput-react.vercel.app)

[![npm version](https://img.shields.io/npm/v/@markput/vue.svg?style=flat&label=vue)](https://www.npmjs.com/package/@markput/vue) [![min zipped size](https://img.shields.io/bundlephobia/minzip/@markput/vue?label=vue+gzip)](https://bundlephobia.com/package/@markput/vue) [![Vue Storybook](https://gw.alipayobjects.com/mdn/ob_info/afts/img/A*CQXNTZfK1vwAAAAAAAAAAABjAQAAAQ/original)](https://markput-vue.vercel.app)



A set of framework adapters that let you combine editable text with custom components using annotated text.

Currently supported packages:

- `@markput/react`

- `@markput/vue`

**[Documentation](https://markput.vercel.app)**

**[React Storybook](https://markput-react.vercel.app)** | **[Vue Storybook](https://markput-vue.vercel.app)**

## Feature

- Powerful annotations tool: add, edit, remove, visualize

- Nested marks support

- Support for custom syntax patterns (e.g., HTML, markdown)

- TypeScript

- Support for any components

- Flexible and customizable

- Two ways to configure

- Helpers for processing text

- Hooks for advanced components

- Button handling (Left, Right, Delete, Backspace, Esc)

- Overlay with the suggestions component by default

- Zero dependencies

- Cross selection

## Installation

Install the package for your framework:

```

pnpm add @markput/react

# or

pnpm add @markput/vue

```

## Contributing

If you want to contribute, you are welcome! Create an issue or start a discussion.