OpenDrawApp: a complete drawing app in one component

Configure <OpenDrawApp> with one typed object: many drawings, a copyable install command, top-right links, a Share button and lifecycle hooks.

<OpenDrawApp>, the demo in one component

Want exactly what this site shows? <OpenDrawApp> is the whole demo, the full editor filling the page, your buttons, the glowing install command and a Share button top-right, your links in the main menu, configured with one typed object. Every control sits on the same 40px island bar, light and dark.

pages/index.vue

<script setup lang="ts">
const config = defineOpenDrawConfig({
  // the copyable, glowing command (short form on laptops, a card on phones)
  command: { text: 'npm install my-lib', short: 'npm i my-lib' },
  // top-right buttons
  links: [
    { label: 'Docs', icon: 'docs', to: '/docs' },
    { label: 'GitHub', icon: 'github', href: 'https://github.com/me/my-lib' },
  ],
  share: true,
  menuLinks: [{ label: 'Changelog', href: '/changelog' }],
  // many drawings, with a drawings sidebar
  files: true,

  // editor
  theme: 'system',
  persist: 'my-board',

  // hooks
  onReady: (editor) => editor.setActiveTool('rectangle'),
  onChange: ({ elements }) => save(elements),
  onCopy: (command) => track('copied', command),
})
</script>

<template>
  <OpenDrawApp :config="config" />
</template>

Config	Type	What it does
`command`	`string \| { text, short?, glow?, prompt? }`	The copyable command pill, top-right.
`links`	`{ label, icon?, to?, href?, variant?, onClick? }[]`	Top-right buttons.
`share`	`boolean \| { url?, title?, label? }`	The primary Share button: share sheet on phones, else copy link.
`menuLinks`	`{ label, href?, onSelect?, icon? }[]`	Links (or actions) in the main menu.
`files`	`boolean \| { indexKey? }`	Many named drawings: a Drawings button and sidebar to create, open, rename, duplicate, delete and search them. Each autosaves on its own.
`theme · persist · grid · initialElements`	`as on <OpenDraw>`	The editor options of <OpenDraw> (persist is ignored with files).
`fullscreen`	`boolean`	Fill the viewport (default) or the parent.
`onReady · onChange · onSelect · onCopy · onShare`	`functions`	Hooks; also emitted as @ready, @change, @select, @copy, @share.

Slot components

The same pieces are separate components for <OpenDraw>'s #top-right and #footer slots: <OpenDrawButton> (filled, primary or ghost; a route, a link or a click; icon-only on phones), <OpenDrawCopyCommand> and <OpenDrawShareButton>.

Board.vue

<template>
  <OpenDraw>
    <template #top-right>
      <OpenDrawCopyCommand command="npm install my-lib" short-command="npm i my-lib" />
      <OpenDrawButton icon="docs" label="Docs" to="/docs" />
      <OpenDrawShareButton />
    </template>
  </OpenDraw>
</template>