# tock-vue-kit-editor

> Vue 3 wysiwyg editor for the Tock Vue Kit

Latest version **0.2.1** (published 2026-01-07) · 0 weekly downloads

## Install

```sh
npm install tock-vue-kit-editor
pnpm add tock-vue-kit-editor
yarn add tock-vue-kit-editor
bun add tock-vue-kit-editor
```

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; has provenance.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2026-01-07 |
| First published | 2024-07-03 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 591.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 1 |
| Author | Rodolphe Küffer |
| Maintainers | jburet, francoisno, tiska, elebescond, fabilin, benvii, rodolphe.kuffer |

## Links

- npm: https://www.npmjs.com/package/tock-vue-kit-editor
- Repository: https://github.com/theopenconversationkit/tock-vue-kit-editor
- Issues: https://github.com/theopenconversationkit/tock-vue-kit-editor/issues
- npm.io page: https://npm.io/package/tock-vue-kit-editor

## Dependencies (4)

- [pinia](https://npm.io/package/pinia.md) ^2.1.7
- [bootstrap](https://npm.io/package/bootstrap.md) ^5.3.3
- [file-saver](https://npm.io/package/file-saver.md) ^2.0.5
- [floating-vue](https://npm.io/package/floating-vue.md) ^5.2.2

## Recent versions

- 0.2.1 (latest) — 2026-01-07
- 0.2.0 — 2026-01-07
- 0.1.1 — 2025-06-30
- 0.1.0 — 2025-02-19
- 0.0.13 — 2024-10-25
- 0.0.12 — 2024-09-25
- 0.0.11 — 2024-07-17
- 0.0.10 — 2024-07-15
- 0.0.8 — 2024-07-15
- 0.0.7 — 2024-07-11
- 0.0.6 — 2024-07-11
- 0.0.5 — 2024-07-11
- 0.0.4 — 2024-07-10
- 0.0.3 — 2024-07-05
- 0.0.2 — 2024-07-04
- … 2 more at https://npm.io/package/tock-vue-kit-editor/versions

## README

# tock-vue-kit-editor

A Vue 3 component for easy editing of [Tock Vue Kit](https://github.com/theopenconversationkit/tock-vue-kit) options and css variables

## Demo

Try the Tock Vue Kit (and the Tock Vue Kit Editor) on the [demo page](https://doc.tock.ai/tock-vue-kit/)

## Prerequisites

A Vue 3 application integrating the [Tock Vue Kit](https://github.com/theopenconversationkit/tock-vue-kit)

## Quick Start

Install the Tock Vue Kit and the Tock Vue Kit Editor :

```
npm install tock-vue-kit
npm install tock-vue-kit-editor
```

Initialize the Tock Vue Kit and then call the editor component :

```html
<script setup lang="ts">
  import "tock-vue-kit/dist/style.css";
  import { renderChat } from "tock-vue-kit";

  import "tock-vue-kit-editor/dist/style.css";
  import { TvkEditor } from "tock-vue-kit-editor";

  const chatTarget = ref<HTMLElement>();
  const displayEditor = ref<boolean>(false);

  onMounted(() => {
    renderChat(chatTarget.value!, "<Tock-connector-url>");

    setTimeout(() => {
      displayEditor.value = true;
    }, 100);
  });
</script>

<template>
  <div ref="chatTarget"></div>

  <aside class="editor" v-if="displayEditor">
    <TvkEditor></TvkEditor>
  </aside>
</template>
```

To ensure correct operation, make sure the Tock Vue kit is initialized before instantiating the editor.

---
_Source: https://npm.io/package/tock-vue-kit-editor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._