# HTML Preview > A live markdown editor that renders Comark content to HTML and displays it in a sandboxed iframe preview, with syntax highlighting support. ```ts [src/main.ts] code,[object Object],span,[object Object],span,[object Object],import,span,[object Object], {,span,[object Object], createRender,span,[object Object], },span,[object Object], from,span,[object Object], ',span,[object Object],@comark/html,span,[object Object],', ,span,[object Object],span,[object Object],import,span,[object Object], highlight ,span,[object Object],from,span,[object Object], ',span,[object Object],comark/plugins/highlight,span,[object Object],', ,span,[object Object], ,span,[object Object],span,[object Object],const,span,[object Object], render ,span,[object Object],=,span,[object Object], createRender,span,[object Object],(,span,[object Object],{, ,span,[object Object],span,[object Object], parse,span,[object Object],:,span,[object Object], {,span,[object Object], plugins,span,[object Object],:,span,[object Object], [,span,[object Object],highlight,span,[object Object],()] ,span,[object Object],},, ,span,[object Object],span,[object Object],},span,[object Object],), ,span,[object Object], ,span,[object Object],span,[object Object],const,span,[object Object], PREVIEW_STYLES ,span,[object Object],=,span,[object Object], `, ,span,[object Object],span,[object Object], body {, ,span,[object Object],span,[object Object], font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;, ,span,[object Object],span,[object Object], font-size: 15px;, ,span,[object Object],span,[object Object], line-height: 1.7;, ,span,[object Object],span,[object Object], color: #1a1a2e;, ,span,[object Object],span,[object Object], max-width: 720px;, ,span,[object Object],span,[object Object], margin: 0 auto;, ,span,[object Object],span,[object Object], padding: 32px 24px;, ,span,[object Object],span,[object Object], }, ,span,[object Object],span,[object Object], /* ... */, ,span,[object Object],span,[object Object],`, ,span,[object Object], ,span,[object Object],span,[object Object],async,span,[object Object], function,span,[object Object], updatePreview,span,[object Object],(,span,[object Object],markdown,span,[object Object],:,span,[object Object], string,span,[object Object],),span,[object Object], {, ,span,[object Object],span,[object Object], const,span,[object Object], html,span,[object Object], =,span,[object Object], await,span,[object Object], render,span,[object Object],(,span,[object Object],markdown,span,[object Object],), ,span,[object Object],span,[object Object], const,span,[object Object], frame,span,[object Object], =,span,[object Object], document,span,[object Object],.,span,[object Object],getElementById,span,[object Object],(,span,[object Object],',span,[object Object],preview,span,[object Object],',span,[object Object],) ,span,[object Object],as,span,[object Object], HTMLIFrameElement, ,span,[object Object],span,[object Object], frame,span,[object Object],.,span,[object Object],srcdoc,span,[object Object], =,span,[object Object], `,span,[object Object],,span,[object Object],${,span,[object Object],html,span,[object Object],},span,[object Object],,span,[object Object],`, ,span,[object Object],span,[object Object],}, ,span,[object Object], ,span,[object Object],span,[object Object],const,span,[object Object], input ,span,[object Object],=,span,[object Object], document,span,[object Object],.,span,[object Object],getElementById,span,[object Object],(,span,[object Object],',span,[object Object],input,span,[object Object],',span,[object Object],) ,span,[object Object],as,span,[object Object], HTMLTextAreaElement, ,span,[object Object],span,[object Object],input,span,[object Object],.,span,[object Object],value ,span,[object Object],=,span,[object Object], SAMPLE, ,span,[object Object],span,[object Object],updatePreview,span,[object Object],(SAMPLE), ,span,[object Object], ,span,[object Object],span,[object Object],let,span,[object Object], debounceTimer,span,[object Object],:,span,[object Object], ReturnType,span,[object Object],, ,span,[object Object],span,[object Object],input,span,[object Object],.,span,[object Object],addEventListener,span,[object Object],(,span,[object Object],',span,[object Object],input,span,[object Object],',span,[object Object],,,span,[object Object], (),span,[object Object], =>,span,[object Object], {, ,span,[object Object],span,[object Object], clearTimeout,span,[object Object],(,span,[object Object],debounceTimer,span,[object Object],), ,span,[object Object],span,[object Object], debounceTimer,span,[object Object], =,span,[object Object], setTimeout,span,[object Object],(,span,[object Object],(),span,[object Object], =>,span,[object Object], updatePreview,span,[object Object],(,span,[object Object],input,span,[object Object],.,span,[object Object],value,span,[object Object],),span,[object Object],,,span,[object Object], 150,span,[object Object],), ,span,[object Object],span,[object Object],},span,[object Object],) ``` ```css [src/style.css] code,[object Object],span,[object Object],span,[object Object],*,span,[object Object],,,span,[object Object], *,span,[object Object],::,span,[object Object],before,span,[object Object],,,span,[object Object], *,span,[object Object],::,span,[object Object],after,span,[object Object], {, ,span,[object Object],span,[object Object], box-sizing,span,[object Object],:,span,[object Object], border-box,span,[object Object],;, ,span,[object Object],span,[object Object], margin,span,[object Object],:,span,[object Object], 0,span,[object Object],;, ,span,[object Object],span,[object Object], padding,span,[object Object],:,span,[object Object], 0,span,[object Object],;, ,span,[object Object],span,[object Object],}, ,span,[object Object], ,span,[object Object],span,[object Object],html,span,[object Object],,,span,[object Object], body,span,[object Object], {, ,span,[object Object],span,[object Object], height,span,[object Object],:,span,[object Object], 100%,span,[object Object],;, ,span,[object Object],span,[object Object], background,span,[object Object],:,span,[object Object], #,span,[object Object],1a1a2e,span,[object Object],;, ,span,[object Object],span,[object Object], font-family,span,[object Object],:,span,[object Object], system-ui,span,[object Object],,,span,[object Object], sans-serif,span,[object Object],;, ,span,[object Object],span,[object Object],}, ,span,[object Object], ,span,[object Object],span,[object Object],#,span,[object Object],app,span,[object Object], {, ,span,[object Object],span,[object Object], display,span,[object Object],:,span,[object Object], grid,span,[object Object],;, ,span,[object Object],span,[object Object], grid-template-columns,span,[object Object],:,span,[object Object], 1fr,span,[object Object], 1fr,span,[object Object],;, ,span,[object Object],span,[object Object], height,span,[object Object],:,span,[object Object], 100vh,span,[object Object],;, ,span,[object Object],span,[object Object], gap,span,[object Object],:,span,[object Object], 1px,span,[object Object],;, ,span,[object Object],span,[object Object], background,span,[object Object],:,span,[object Object], #,span,[object Object],2a2a3e,span,[object Object],;, ,span,[object Object],span,[object Object],}, ,span,[object Object], ,span,[object Object],span,[object Object],.,span,[object Object],pane-header,span,[object Object], {, ,span,[object Object],span,[object Object], padding,span,[object Object],:,span,[object Object], 8px,span,[object Object], 14px,span,[object Object],;, ,span,[object Object],span,[object Object], font-size,span,[object Object],:,span,[object Object], 11px,span,[object Object],;, ,span,[object Object],span,[object Object], font-weight,span,[object Object],:,span,[object Object], 600,span,[object Object],;, ,span,[object Object],span,[object Object], letter-spacing,span,[object Object],:,span,[object Object], 0.08em,span,[object Object],;, ,span,[object Object],span,[object Object], text-transform,span,[object Object],:,span,[object Object], uppercase,span,[object Object],;, ,span,[object Object],span,[object Object], color,span,[object Object],:,span,[object Object], #,span,[object Object],888,span,[object Object],;, ,span,[object Object],span,[object Object], background,span,[object Object],:,span,[object Object], #,span,[object Object],1e1e32,span,[object Object],;, ,span,[object Object],span,[object Object], border-bottom,span,[object Object],:,span,[object Object], 1px,span,[object Object], solid ,span,[object Object],#,span,[object Object],2a2a3e,span,[object Object],;, ,span,[object Object],span,[object Object], user-select,span,[object Object],:,span,[object Object], none,span,[object Object],;, ,span,[object Object],span,[object Object],}, ,span,[object Object], ,span,[object Object],span,[object Object],#,span,[object Object],editor-pane,span,[object Object], {, ,span,[object Object],span,[object Object], display,span,[object Object],:,span,[object Object], flex,span,[object Object],;, ,span,[object Object],span,[object Object], flex-direction,span,[object Object],:,span,[object Object], column,span,[object Object],;, ,span,[object Object],span,[object Object], background,span,[object Object],:,span,[object Object], #,span,[object Object],1e1e32,span,[object Object],;, ,span,[object Object],span,[object Object], overflow,span,[object Object],:,span,[object Object], hidden,span,[object Object],;, ,span,[object Object],span,[object Object],}, ,span,[object Object], ,span,[object Object],span,[object Object],#,span,[object Object],input,span,[object Object], {, ,span,[object Object],span,[object Object], flex,span,[object Object],:,span,[object Object], 1,span,[object Object],;, ,span,[object Object],span,[object Object], resize,span,[object Object],:,span,[object Object], none,span,[object Object],;, ,span,[object Object],span,[object Object], border,span,[object Object],:,span,[object Object], none,span,[object Object],;, ,span,[object Object],span,[object Object], outline,span,[object Object],:,span,[object Object], none,span,[object Object],;, ,span,[object Object],span,[object Object], background,span,[object Object],:,span,[object Object], #,span,[object Object],1e1e32,span,[object Object],;, ,span,[object Object],span,[object Object], color,span,[object Object],:,span,[object Object], #,span,[object Object],cdd6f4,span,[object Object],;, ,span,[object Object],span,[object Object], font-family,span,[object Object],:,span,[object Object], ',span,[object Object],JetBrains Mono,span,[object Object],',span,[object Object],,,span,[object Object], ',span,[object Object],Fira Code,span,[object Object],',span,[object Object],,,span,[object Object], ui-monospace,span,[object Object],,,span,[object Object], monospace,span,[object Object],;, ,span,[object Object],span,[object Object], font-size,span,[object Object],:,span,[object Object], 13px,span,[object Object],;, ,span,[object Object],span,[object Object], line-height,span,[object Object],:,span,[object Object], 1.6,span,[object Object],;, ,span,[object Object],span,[object Object], padding,span,[object Object],:,span,[object Object], 16px,span,[object Object],;, ,span,[object Object],span,[object Object], tab-size,span,[object Object],:,span,[object Object], 2,span,[object Object],;, ,span,[object Object],span,[object Object],}, ,span,[object Object], ,span,[object Object],span,[object Object],#,span,[object Object],preview-pane,span,[object Object], {, ,span,[object Object],span,[object Object], display,span,[object Object],:,span,[object Object], flex,span,[object Object],;, ,span,[object Object],span,[object Object], flex-direction,span,[object Object],:,span,[object Object], column,span,[object Object],;, ,span,[object Object],span,[object Object], background,span,[object Object],:,span,[object Object], #,span,[object Object],fff,span,[object Object],;, ,span,[object Object],span,[object Object], overflow,span,[object Object],:,span,[object Object], hidden,span,[object Object],;, ,span,[object Object],span,[object Object],}, ,span,[object Object], ,span,[object Object],span,[object Object],#,span,[object Object],preview,span,[object Object], {, ,span,[object Object],span,[object Object], flex,span,[object Object],:,span,[object Object], 1,span,[object Object],;, ,span,[object Object],span,[object Object], border,span,[object Object],:,span,[object Object], none,span,[object Object],;, ,span,[object Object],span,[object Object], background,span,[object Object],:,span,[object Object], #,span,[object Object],fff,span,[object Object],;, ,span,[object Object],span,[object Object],} ``` ```html [index.html] code,[object Object],span,[object Object],span,[object Object],, ,span,[object Object],span,[object Object],<,span,[object Object],html,span,[object Object], lang,span,[object Object],=,span,[object Object],",span,[object Object],en,span,[object Object],",span,[object Object],>, ,span,[object Object],span,[object Object], <,span,[object Object],head,span,[object Object],>, ,span,[object Object],span,[object Object], <,span,[object Object],meta,span,[object Object], charset,span,[object Object],=,span,[object Object],",span,[object Object],UTF-8,span,[object Object],",span,[object Object], />, ,span,[object Object],span,[object Object], <,span,[object Object],meta,span,[object Object], name,span,[object Object],=,span,[object Object],",span,[object Object],viewport,span,[object Object],",span,[object Object], content,span,[object Object],=,span,[object Object],",span,[object Object],width=device-width, initial-scale=1.0,span,[object Object],",span,[object Object], />, ,span,[object Object],span,[object Object], <,span,[object Object],title,span,[object Object],>,span,[object Object],Comark HTML,span,[object Object],, ,span,[object Object],span,[object Object], <,span,[object Object],link,span,[object Object], rel,span,[object Object],=,span,[object Object],",span,[object Object],stylesheet,span,[object Object],",span,[object Object], href,span,[object Object],=,span,[object Object],",span,[object Object],/src/style.css,span,[object Object],",span,[object Object], />, ,span,[object Object],span,[object Object], , ,span,[object Object],span,[object Object], <,span,[object Object],body,span,[object Object],>, ,span,[object Object],span,[object Object], <,span,[object Object],div,span,[object Object], id,span,[object Object],=,span,[object Object],",span,[object Object],app,span,[object Object],",span,[object Object],>, ,span,[object Object],span,[object Object], <,span,[object Object],div,span,[object Object], id,span,[object Object],=,span,[object Object],",span,[object Object],editor-pane,span,[object Object],",span,[object Object],>, ,span,[object Object],span,[object Object], <,span,[object Object],div,span,[object Object], class,span,[object Object],=,span,[object Object],",span,[object Object],pane-header,span,[object Object],",span,[object Object],>,span,[object Object],Markdown,span,[object Object],, ,span,[object Object],span,[object Object], <,span,[object Object],textarea,span,[object Object], id,span,[object Object],=,span,[object Object],",span,[object Object],input,span,[object Object],",span,[object Object], spellcheck,span,[object Object],=,span,[object Object],",span,[object Object],false,span,[object Object],",span,[object Object],>, ,span,[object Object],span,[object Object], , ,span,[object Object],span,[object Object], <,span,[object Object],div,span,[object Object], id,span,[object Object],=,span,[object Object],",span,[object Object],preview-pane,span,[object Object],",span,[object Object],>, ,span,[object Object],span,[object Object], <,span,[object Object],div,span,[object Object], class,span,[object Object],=,span,[object Object],",span,[object Object],pane-header,span,[object Object],",span,[object Object],>,span,[object Object],HTML Preview,span,[object Object],, ,span,[object Object],span,[object Object], <,span,[object Object],iframe,span,[object Object], id,span,[object Object],=,span,[object Object],",span,[object Object],preview,span,[object Object],",span,[object Object], sandbox,span,[object Object],=,span,[object Object],",span,[object Object],allow-same-origin,span,[object Object],",span,[object Object],>, ,span,[object Object],span,[object Object], , ,span,[object Object],span,[object Object], , ,span,[object Object],span,[object Object], <,span,[object Object],script,span,[object Object], type,span,[object Object],=,span,[object Object],",span,[object Object],module,span,[object Object],",span,[object Object], src,span,[object Object],=,span,[object Object],",span,[object Object],/src/main.ts,span,[object Object],",span,[object Object],>, ,span,[object Object],span,[object Object], , ,span,[object Object],span,[object Object], ``` ```json [package.json] code,[object Object],span,[object Object],span,[object Object],{, ,span,[object Object],span,[object Object], ",span,[object Object],name,span,[object Object],",span,[object Object],:,span,[object Object], ",span,[object Object],comark-html,span,[object Object],",span,[object Object],,, ,span,[object Object],span,[object Object], ",span,[object Object],version,span,[object Object],",span,[object Object],:,span,[object Object], ",span,[object Object],0.0.1,span,[object Object],",span,[object Object],,, ,span,[object Object],span,[object Object], ",span,[object Object],private,span,[object Object],",span,[object Object],:,span,[object Object], true,, ,span,[object Object],span,[object Object], ",span,[object Object],type,span,[object Object],",span,[object Object],:,span,[object Object], ",span,[object Object],module,span,[object Object],",span,[object Object],,, ,span,[object Object],span,[object Object], ",span,[object Object],scripts,span,[object Object],",span,[object Object],:,span,[object Object], {, ,span,[object Object],span,[object Object], ",span,[object Object],dev,span,[object Object],",span,[object Object],:,span,[object Object], ",span,[object Object],vite,span,[object Object],",span,[object Object],,, ,span,[object Object],span,[object Object], ",span,[object Object],build,span,[object Object],",span,[object Object],:,span,[object Object], ",span,[object Object],tsc && vite build,span,[object Object],",span,[object Object],,, ,span,[object Object],span,[object Object], ",span,[object Object],preview,span,[object Object],",span,[object Object],:,span,[object Object], ",span,[object Object],vite preview,span,[object Object],", ,span,[object Object],span,[object Object], },, ,span,[object Object],span,[object Object], ",span,[object Object],dependencies,span,[object Object],",span,[object Object],:,span,[object Object], {, ,span,[object Object],span,[object Object], ",span,[object Object],comark,span,[object Object],",span,[object Object],:,span,[object Object], ",span,[object Object],workspace:*,span,[object Object],",span,[object Object],,, ,span,[object Object],span,[object Object], ",span,[object Object],@comark/html,span,[object Object],",span,[object Object],:,span,[object Object], ",span,[object Object],workspace:*,span,[object Object],",span,[object Object],,, ,span,[object Object],span,[object Object], ",span,[object Object],shiki,span,[object Object],",span,[object Object],:,span,[object Object], ",span,[object Object],^4.0.0,span,[object Object],", ,span,[object Object],span,[object Object], },, ,span,[object Object],span,[object Object], ",span,[object Object],devDependencies,span,[object Object],",span,[object Object],:,span,[object Object], {, ,span,[object Object],span,[object Object], ",span,[object Object],typescript,span,[object Object],",span,[object Object],:,span,[object Object], ",span,[object Object],^5.9.3,span,[object Object],",span,[object Object],,, ,span,[object Object],span,[object Object], ",span,[object Object],vite,span,[object Object],",span,[object Object],:,span,[object Object], ",span,[object Object],^7.3.1,span,[object Object],", ,span,[object Object],span,[object Object], }, ,span,[object Object],span,[object Object],} ``` ```json [tsconfig.json] code,[object Object],span,[object Object],span,[object Object],{, ,span,[object Object],span,[object Object], ",span,[object Object],compilerOptions,span,[object Object],",span,[object Object],:,span,[object Object], {, ,span,[object Object],span,[object Object], ",span,[object Object],target,span,[object Object],",span,[object Object],:,span,[object Object], ",span,[object Object],es2022,span,[object Object],",span,[object Object],,, ,span,[object Object],span,[object Object], ",span,[object Object],lib,span,[object Object],",span,[object Object],:,span,[object Object], [,span,[object Object],",span,[object Object],esnext,span,[object Object],",span,[object Object],,,span,[object Object], ",span,[object Object],DOM,span,[object Object],",span,[object Object],,,span,[object Object], ",span,[object Object],DOM.Iterable,span,[object Object],",span,[object Object],],, ,span,[object Object],span,[object Object], ",span,[object Object],module,span,[object Object],",span,[object Object],:,span,[object Object], ",span,[object Object],esnext,span,[object Object],",span,[object Object],,, ,span,[object Object],span,[object Object], ",span,[object Object],moduleResolution,span,[object Object],",span,[object Object],:,span,[object Object], ",span,[object Object],bundler,span,[object Object],",span,[object Object],,, ,span,[object Object],span,[object Object], ",span,[object Object],strict,span,[object Object],",span,[object Object],:,span,[object Object], true,, ,span,[object Object],span,[object Object], ",span,[object Object],skipLibCheck,span,[object Object],",span,[object Object],:,span,[object Object], true,, ,span,[object Object],span,[object Object], ",span,[object Object],noEmit,span,[object Object],",span,[object Object],:,span,[object Object], true, ,span,[object Object],span,[object Object], },, ,span,[object Object],span,[object Object], ",span,[object Object],include,span,[object Object],",span,[object Object],:,span,[object Object], [,span,[object Object],",span,[object Object],src/**/*,span,[object Object],",span,[object Object],], ,span,[object Object],span,[object Object],} ``` This example shows a split-pane live preview: write Comark markdown on the left and see it rendered as styled HTML in a sandboxed `