[{"data":1,"prerenderedAt":195},["ShallowReactive",2],{"quirekit-doc:\u002Fen\u002Fconcepts\u002Fviews":3},{"id":4,"title":5,"body":6,"description":183,"extension":184,"keywords":185,"locale":186,"meta":187,"navigation":188,"order":189,"path":190,"section":191,"seo":192,"stem":193,"__hash__":194},"docs\u002Fconcepts\u002Fviews.en.md","Views and rendering",{"type":7,"value":8,"toc":176},"minimark",[9,13,18,107,122,141,145,152,156,163],[10,11,12],"p",{},"Different views can display the same document. Core manages content and commands; View displays it and translates typing, clicking and selection into document operations.",[14,15,17],"h2",{"id":16},"where-to-start","Where to start",[19,20,21,37],"table",{},[22,23,24],"thead",{},[25,26,27,31,34],"tr",{},[28,29,30],"th",{},"View",[28,32,33],{},"Starting point",[28,35,36],{},"Integration",[38,39,40,59,75,91],"tbody",{},[25,41,42,46,49],{},[43,44,45],"td",{},"Native DOM",[43,47,48],{},"Editable text using browser input and DOM NodeViews",[43,50,51,55,56],{},[52,53,54],"code",{},"DomViewExtension",", ",[52,57,58],{},"mode: 'dom'",[25,60,61,64,67],{},[43,62,63],{},"Canvas",[43,65,66],{},"Drawn text, selections and paginated workspaces",[43,68,69,55,72],{},[52,70,71],{},"canvasViewExtension()",[52,73,74],{},"mode: 'canvas'",[25,76,77,80,83],{},[43,78,79],{},"SVG",[43,81,82],{},"Vector display from shared layout results",[43,84,85,55,88],{},[52,86,87],{},"svgViewExtension()",[52,89,90],{},"mode: 'svg'",[25,92,93,96,99],{},[43,94,95],{},"Retained HTML",[43,97,98],{},"Continuous layout with QuireKit input and selection",[43,100,101,55,104],{},[52,102,103],{},"htmlViewExtension()",[52,105,106],{},"mode: 'html'",[10,108,109,110,113,114,117,118,121],{},"Native DOM comes from ",[52,111,112],{},"@quirekit\u002Fdom-view",", retained HTML from ",[52,115,116],{},"@quirekit\u002Fview-html",", and Canvas and SVG from ",[52,119,120],{},"@quirekit\u002Fview",". Native DOM and retained HTML have different input and geometry behavior.",[10,123,124,125,130,131,135,136,140],{},"Start with DOM in ",[126,127,129],"a",{"href":128},"\u002Fen\u002Fguide\u002Fquick-start","quick start",", build a Canvas\u002FSVG workspace with the ",[126,132,134],{"href":133},"\u002Fen\u002Fbuild\u002Fview","View tutorial",", or embed ",[126,137,139],{"href":138},"\u002Fen\u002Fclassic\u002Fquick-start","Classic"," for an existing ruler and ribbon.",[14,142,144],{"id":143},"switching-views-does-not-convert-the-model","Switching views does not convert the model",[10,146,147,148,151],{},"Register needed views at creation, then use ",[52,149,150],{},"changeMode()"," for the primary view. Core keeps content, selection and history. Canvas does not turn articles into Word documents; Word extensions still supply structure and layout rules.",[14,153,155],{"id":154},"custom-content-needs-a-display-implementation","Custom content needs a display implementation",[10,157,158,159,162],{},"Existing capabilities support paragraphs and common formats. Custom nodes need rendering for their selected view; ",[52,160,161],{},"renderHTML()"," alone does not explain child layout to Canvas.",[10,164,165,166,170,171,175],{},"See the ",[126,167,169],{"href":168},"\u002Fen\u002Fbuild\u002Fextension","note-group tutorial",". View licensing differs from Core; see ",[126,172,174],{"href":173},"\u002Fen\u002Fsupport","support",".",{"title":177,"searchDepth":178,"depth":178,"links":179},"",2,[180,181,182],{"id":16,"depth":178,"text":17},{"id":143,"depth":178,"text":144},{"id":154,"depth":178,"text":155},"Understand content versus display and choose from four views: DOM, HTML, Canvas and SVG.","md",null,"en",{},true,4,"\u002Fen\u002Fconcepts\u002Fviews","Core concepts",{"title":5,"description":183},"concepts\u002Fviews.en","HHxMHsuvs_itf6nfA22ZvHmM2F1ELDIyIoTJYenCX9k",1793045208528]