Complete workspace reference

Use this page as a reference after following the tutorial. For your first integration, begin with your first editor. Find individual capabilities by their file responsibilities below.

What each file does

File	Purpose	Tutorial
`product/standalone.ts`	Mount a workspace in an ordinary Vue application and return cleanup	Project
`product/workspace.vue`	Compose toolbar, file controls and editing area	Interface
`product/runtime.ts`	Create Editor and connect View to host dimensions	View
`product/assembly/generic.ts`	Configure articles and note groups	Model
`product/assembly/word.ts`	Configure the Word preset and matching initial content	Model
`product/session.ts`	Update controls and coordinate editing, saving and loading	Interface
`product/files/repository.ts`	Write backups to browser storage	Files
`product/files/backup.ts`	Validate backup version, nodes and attributes	Files
`product/files/docx.ts`	Load Word conversion on demand and handle actual bytes	Files
`product/feature/*`	Note structure, command, layout and selection	Content extension
`product/types.ts`	Workspace shared types	Module inputs and outputs
`shared/download.ts`	Hand generated files to the browser for downloading	Files

The complete workspace uses Vue, @quirekit/core, @quirekit/starter-kit, @quirekit/view, @quirekit/view-engine, @quirekit/ui and @quirekit/unocss-preset. The Word variant also uses @quirekit/classic-docx and @quirekit/extension-text-style. See availability and licensing for commercial packages and use matching versions you have obtained.

Copy product/ and shared/ from the file list into src/examples/, preserving relative paths. Enable Vue and UnoCSS in Vite, use defineQuireKitUnoConfig() for UnoCSS, and scan ./src/**/*.{vue,ts}. Import uno.css in your entry; the workspace already imports View structure styles.

import 'uno.css'
import { mountDocumentProduct } from './examples/product/standalone'

const release = mountDocumentProduct(document.getElementById('app')!)
if (import.meta.hot) import.meta.hot.dispose(release)

mountDocumentProduct() receives an existing element and returns cleanup for both Vue and Editor. Call it when the application exits or during hot replacement.

Complete files

Choose one file and expand its arrow. Copy always returns that file's complete original text. All local dependencies remain available in the list.

import { createApp, h } from "vue";
import { defaultTheme, quireIconRegistry } from "@quirekit/ui";
import { QuireThemeProvider, QuireIconProvider, QuireLocaleProvider } from "@quirekit/ui/vue";
import Workspace from "./workspace.vue";
/**
 * Mounts the full reference in an ordinary Vue/Vite host, without Nuxt or Classic's product shell.
 * @param element - Host element whose height and placement belong to the application.
 * @param locale - Initial UI and document-copy language.
 * @returns Release function for Vue, View, Core and all session listeners.
 */
export function mountDocumentProduct(element: HTMLElement, locale: "zh-CN" | "en" = "zh-CN"): () => void {
  const app = createApp({
    render: () => h(QuireIconProvider, { registry: quireIconRegistry }, () =>
      h(QuireThemeProvider, { theme: defaultTheme }, () =>
        h(QuireLocaleProvider, { locale }, () => h(Workspace, { locale, model: "word-v1" })))),
  });
  app.mount(element);
  return () => app.unmount();
}

What each file does

Run it in your project

Complete files