A headless infinite canvas editor framework built on WebGL rendering, supports exporting to image, video, and PPT. Only the ESM.
npm i mce<script setup lang="ts">
import { Editor, EditorLayout, EditorLayoutItem } from 'mce'
import 'mce/styles'
import gif from '@mce/gif'
import mp4 from '@mce/mp4'
import openxml from '@mce/openxml'
import pdf from '@mce/pdf'
import svg from '@mce/svg'
import gifWorkerUrl from 'modern-gif/worker?url'
const editor = new Editor({
plugins: [
gif(),
mp4(),
svg(),
pdf(),
openxml(),
],
gifWorkerUrl,
locale: { locale: 'en' },
viewport: {
camera: { enabled: true },
zoom: { strategy: 'contain' },
screenPadding: { left: 0, top: 0, right: 0, bottom: 0 },
},
canvas: {
checkerboard: { enabled: true, style: 'grid' },
pixelGrid: { enabled: true },
frame: { outline: false },
watermark: {
url: '/example.jpg',
width: 100,
alpha: 0.05,
rotation: 0.5236,
},
},
ui: {
ruler: { visible: true },
scrollbar: { visible: true },
statusbar: { visible: true },
toolbelt: { visible: true },
madeWith: { visible: false },
},
typography: {
strategy: 'autoHeight',
defaultFont: {
family: 'SourceHanSansCN-Normal',
src: '/fonts/SourceHanSansCN-Normal.woff',
},
},
customUpload: async (blob) => URL.createObjectURL(blob),
customContextMenu: (menu) => menu,
doc: {
children: [
{ foreground: '/example.png', style: { rotate: 60, left: 200, top: 10, width: 50, height: 50 } },
{ text: 'test', style: { rotate: 40, left: 100, top: 100, width: 60, height: 40, fontSize: 20, color: '#FF00FF' } },
{
style: { left: 200, top: 100, width: 100, height: 100, fontSize: 22 },
text: [
{
letterSpacing: 3,
fragments: [
{ content: 'He', color: '#00FF00', fontSize: 12 },
{ content: 'llo', color: '#000000' },
],
},
{ content: ', ', color: '#FF0000' },
{ content: 'World!', color: '#0000FF' },
],
},
],
},
})
editor.on('setDoc', () => {
editor.load('http://localhost:5173/example.jpg').then((el) => {
editor.addElement(el, {
position: { x: 500, y: 100 },
})
})
})
</script>
<template>
<div style="width: 100vw; height: 100vh">
<EditorLayout :editor="editor">
<template #selection />
<template #floatbar />
<template #drawboard />
<EditorLayoutItem position="top" :size="56" />
<EditorLayoutItem position="left" :size="380" />
<EditorLayoutItem position="right" :size="260" />
</EditorLayout>
</div>
</template>slot sub component
<script setup lang="ts">
import { useEditor } from 'mce'
const { selection } = useEditor()
</script>
<template>
<div>
{{ selection }}
</div>
</template>