[{"data":1,"prerenderedAt":219},["ShallowReactive",2],{"quirekit-doc:\u002Fen\u002Fbuild":3},{"id":4,"title":5,"body":6,"description":207,"extension":208,"keywords":209,"locale":210,"meta":211,"navigation":212,"order":213,"path":214,"section":215,"seo":216,"stem":217,"__hash__":218},"docs\u002Fbuild.en.md","Build your own editor",{"type":7,"value":8,"toc":200},"minimark",[9,13,22,27,161,169,173,176,180,183,187,190],[10,11,12],"p",{},"To build a product like Classic with your own toolbar and workspace, start with Core. This tutorial connects content, views and interface step by step; you do not need to understand a complete application first.",[10,14,15,16,21],{},"You should know Vue 3, TypeScript and basic package management. New to QuireKit? Start with ",[17,18,20],"a",{"href":19},"\u002Fen\u002Fbuild\u002Fproject","your first editor",".",[23,24,26],"h2",{"id":25},"follow-your-current-task","Follow your current task",[28,29,30,46],"table",{},[31,32,33],"thead",{},[34,35,36,40,43],"tr",{},[37,38,39],"th",{},"Task",[37,41,42],{},"Chapter",[37,44,45],{},"What you learn",[47,48,49,63,77,91,105,119,133,147],"tbody",{},[34,50,51,55,60],{},[52,53,54],"td",{},"Put an editor on a page",[52,56,57],{},[17,58,59],{"href":19},"Project",[52,61,62],{},"Create and destroy Editor in one Vue component",[34,64,65,68,74],{},[52,66,67],{},"Decide what content stores",[52,69,70],{},[17,71,73],{"href":72},"\u002Fen\u002Fbuild\u002Fmodel","Document model",[52,75,76],{},"Understand nodes and marks; choose article or Word models",[34,78,79,82,88],{},[52,80,81],{},"Display Canvas\u002FSVG content",[52,83,84],{},[17,85,87],{"href":86},"\u002Fen\u002Fbuild\u002Fview","View",[52,89,90],{},"Register views and distinguish display size from pagination",[34,92,93,96,102],{},[52,94,95],{},"Add your toolbar",[52,97,98],{},[17,99,101],{"href":100},"\u002Fen\u002Fbuild\u002Fcommands","Commands and interface",[52,103,104],{},"Run actions and update button state",[34,106,107,110,116],{},[52,108,109],{},"Add new content",[52,111,112],{},[17,113,115],{"href":114},"\u002Fen\u002Fbuild\u002Fextension","Content extension",[52,117,118],{},"Implement an editable, selectable, persistable note group",[34,120,121,124,130],{},[52,122,123],{},"Extend Classic",[52,125,126],{},[17,127,129],{"href":128},"\u002Fen\u002Fbuild\u002Fproduct-plugin","Product plugins",[52,131,132],{},"Add ribbon actions, sidebars and file services",[34,134,135,138,144],{},[52,136,137],{},"Save and open documents",[52,139,140],{},[17,141,143],{"href":142},"\u002Fen\u002Fbuild\u002Ffiles","Files",[52,145,146],{},"Save JSON, validate restores and integrate DOCX",[34,148,149,152,158],{},[52,150,151],{},"Add images, fonts or collaboration",[52,153,154],{},[17,155,157],{"href":156},"\u002Fen\u002Fbuild\u002Fresources","Resources",[52,159,160],{},"Find the integration layer for each capability",[10,162,163,164,168],{},"Each chapter explains the problem before its code. The ",[17,165,167],{"href":166},"\u002Fen\u002Fbuild\u002Freference","complete workspace reference"," lets you inspect full implementations by file.",[23,170,172],{"id":171},"what-you-will-build","What you will build",[10,174,175],{},"The final workspace below uses the Word model. Type, select, format and undo; switch Canvas\u002FSVG, save in this browser or download JSON. Core and View provide the editor; the example owns its toolbar and file workflow.",[177,178],"docs-demo",{"name":179},"product\u002Fword",[10,181,182],{},"Browser storage is local to this browser. Save edits before opening another file. Media storage, collaboration and review interfaces require separate integrations explained later.",[23,184,186],{"id":185},"build-a-workspace-or-reuse-classic","Build a workspace or reuse Classic",[10,188,189],{},"With your own workspace, you own the interface, control state and storage workflow. Core manages content and commands; View manages display and input. Classic supplies an existing workspace and ribbon for you to configure and extend.",[10,191,192,193,197,198,21],{},"For an embedded product, see ",[17,194,196],{"href":195},"\u002Fen\u002Fclassic\u002Fquick-start","Classic quick start",". To build your own, continue with ",[17,199,20],{"href":19},{"title":201,"searchDepth":202,"depth":202,"links":203},"",2,[204,205,206],{"id":25,"depth":202,"text":26},{"id":171,"depth":202,"text":172},{"id":185,"depth":202,"text":186},"Progress from a first editor to models, pagination, controls, extensions and file operations.","md",null,"en",{},true,0,"\u002Fen\u002Fbuild","Build a product",{"title":5,"description":207},"build.en","TcJRCjVlnkAeJwByzzipRpe3cbuyTBx3qvdS0XrJCvI",1793045208527]