# Svelte

> A minimal example showing how to use Comark with Svelte and Vite.

<code-tree defaultValue="src/App.svelte" :expandAll="true">

```ts [src/main.ts]
code,[object Object],span,[object Object],span,[object Object],import,span,[object Object], {,span,[object Object], mount,span,[object Object], },span,[object Object], from,span,[object Object], ',span,[object Object],svelte,span,[object Object],',
,span,[object Object],span,[object Object],import,span,[object Object], App ,span,[object Object],from,span,[object Object], ',span,[object Object],./App.svelte,span,[object Object],',
,span,[object Object],
,span,[object Object],span,[object Object],mount,span,[object Object],(App,span,[object Object],,,span,[object Object], {,
,span,[object Object],span,[object Object],  target,span,[object Object],:,span,[object Object], document,span,[object Object],.,span,[object Object],getElementById,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],},span,[object Object],)
```

```svelte [src/App.svelte]
code,[object Object],span,[object Object],span,[object Object],<,span,[object Object],script,span,[object Object], lang,span,[object Object],=,span,[object Object],",span,[object Object],ts,span,[object Object],",span,[object Object],>,
,span,[object Object],span,[object Object],  import,span,[object Object], {,span,[object Object], Comark,span,[object Object], },span,[object Object], from,span,[object Object], ',span,[object Object],@comark/svelte,span,[object Object],',
,span,[object Object],span,[object Object],  import,span,[object Object], Alert ,span,[object Object],from,span,[object Object], ',span,[object Object],./components/Alert.svelte,span,[object Object],',
,span,[object Object],
,span,[object Object],span,[object Object],  const,span,[object Object], markdown ,span,[object Object],=,span,[object Object], `,
,span,[object Object],span,[object Object],# Hello *World*,
,span,[object Object],
,span,[object Object],span,[object Object],::alert{type="info"},
,span,[object Object],span,[object Object],This is an alert!,
,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],>,
,span,[object Object],
,span,[object Object],span,[object Object],<,span,[object Object],Comark,span,[object Object], markdown,span,[object Object],={,span,[object Object],markdown,span,[object Object],} ,span,[object Object],components,span,[object Object],={{,span,[object Object], Alert ,span,[object Object],}} />
```

```svelte [src/components/Alert.svelte]
code,[object Object],span,[object Object],span,[object Object],<,span,[object Object],script,span,[object Object], lang,span,[object Object],=,span,[object Object],",span,[object Object],ts,span,[object Object],",span,[object Object],>,
,span,[object Object],span,[object Object],  import,span,[object Object], type,span,[object Object], {,span,[object Object], Snippet,span,[object Object], },span,[object Object], from,span,[object Object], ',span,[object Object],svelte,span,[object Object],',
,span,[object Object],
,span,[object Object],span,[object Object],  let,span,[object Object], {,
,span,[object Object],span,[object Object],    type ,span,[object Object],=,span,[object Object], ',span,[object Object],info,span,[object Object],',span,[object Object],,,
,span,[object Object],span,[object Object],    children,span,[object Object],,,
,span,[object Object],span,[object Object],  }:,span,[object Object], {,
,span,[object Object],span,[object Object],    type,span,[object Object],?:,span,[object Object], ',span,[object Object],info,span,[object Object],',span,[object Object], |,span,[object Object], ',span,[object Object],warning,span,[object Object],',span,[object Object], |,span,[object Object], ',span,[object Object],success,span,[object Object],',span,[object Object], |,span,[object Object], ',span,[object Object],danger,span,[object Object],',
,span,[object Object],span,[object Object],    children,span,[object Object],?:,span,[object Object], Snippet,
,span,[object Object],span,[object Object],  },span,[object Object], =,span,[object Object], $,span,[object Object],props,span,[object Object],(),
,span,[object Object],
,span,[object Object],span,[object Object],  const,span,[object Object], config ,span,[object Object],=,span,[object Object], {,
,span,[object Object],span,[object Object],    info,span,[object Object],:,span,[object Object], ',span,[object Object],bg-blue-50 border-blue-400 text-blue-900 dark:bg-blue-950/50 dark:border-blue-500/50 dark:text-blue-200,span,[object Object],',span,[object Object],,,
,span,[object Object],span,[object Object],    warning,span,[object Object],:,span,[object Object], ',span,[object Object],bg-amber-50 border-amber-400 text-amber-900 dark:bg-amber-950/50 dark:border-amber-500/50 dark:text-amber-200,span,[object Object],',span,[object Object],,,
,span,[object Object],span,[object Object],    success,span,[object Object],:,span,[object Object], ',span,[object Object],bg-emerald-50 border-emerald-400 text-emerald-900 dark:bg-emerald-950/50 dark:border-emerald-500/50 dark:text-emerald-200,span,[object Object],',span,[object Object],,,
,span,[object Object],span,[object Object],    danger,span,[object Object],:,span,[object Object], ',span,[object Object],bg-red-50 border-red-400 text-red-900 dark:bg-red-950/50 dark:border-red-500/50 dark:text-red-200,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],>,
,span,[object Object],
,span,[object Object],span,[object Object],<,span,[object Object],div,
,span,[object Object],span,[object Object],  class,span,[object Object],=,span,[object Object],",span,[object Object],my-4 rounded-lg border-l-4 px-4 py-3 text-sm leading-relaxed ,span,[object Object],{,span,[object Object],config[type],span,[object Object],}",
,span,[object Object],span,[object Object],  role,span,[object Object],=,span,[object Object],",span,[object Object],alert,span,[object Object],",
,span,[object Object],span,[object Object],>,
,span,[object Object],span,[object Object],  {@,span,[object Object],render,span,[object Object], children,span,[object Object],?.,span,[object Object],(),span,[object Object],},
,span,[object Object],span,[object Object],</,span,[object Object],div,span,[object Object],>
```

```ts [vite.config.ts]
code,[object Object],span,[object Object],span,[object Object],import,span,[object Object], {,span,[object Object], defineConfig,span,[object Object], },span,[object Object], from,span,[object Object], ',span,[object Object],vite,span,[object Object],',
,span,[object Object],span,[object Object],import,span,[object Object], {,span,[object Object], svelte,span,[object Object], },span,[object Object], from,span,[object Object], ',span,[object Object],@sveltejs/vite-plugin-svelte,span,[object Object],',
,span,[object Object],span,[object Object],import,span,[object Object], tailwindcss ,span,[object Object],from,span,[object Object], ',span,[object Object],@tailwindcss/vite,span,[object Object],',
,span,[object Object],
,span,[object Object],span,[object Object],export,span,[object Object], default,span,[object Object], defineConfig,span,[object Object],(,span,[object Object],{,
,span,[object Object],span,[object Object],  plugins,span,[object Object],:,span,[object Object], [,
,span,[object Object],span,[object Object],    svelte,span,[object Object],(),span,[object Object],,,
,span,[object Object],span,[object Object],    tailwindcss,span,[object Object],(),span,[object Object],,,
,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-svelte,span,[object Object],",span,[object Object],,,
,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/svelte,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],@tailwindcss/vite,span,[object Object],",span,[object Object],:,span,[object Object], ",span,[object Object],^4.2.0,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],  ",span,[object Object],devDependencies,span,[object Object],",span,[object Object],:,span,[object Object], {,
,span,[object Object],span,[object Object],    ",span,[object Object],@sveltejs/vite-plugin-svelte,span,[object Object],",span,[object Object],:,span,[object Object], ",span,[object Object],^6.2.4,span,[object Object],",span,[object Object],,,
,span,[object Object],span,[object Object],    ",span,[object Object],svelte,span,[object Object],",span,[object Object],:,span,[object Object], ",span,[object Object],^5.53.7,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],}
```

```html [index.html]
code,[object Object],span,[object Object],span,[object Object],<!,span,[object Object],DOCTYPE,span,[object Object], html,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 - Svelte Example,span,[object Object],</,span,[object Object],title,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],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],div,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],script,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],html,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],ES2020,span,[object Object],",span,[object Object],,,
,span,[object Object],span,[object Object],    ",span,[object Object],useDefineForClassFields,span,[object Object],",span,[object Object],:,span,[object Object], true,,
,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],lib,span,[object Object],",span,[object Object],:,span,[object Object], [,span,[object Object],",span,[object Object],ES2020,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],skipLibCheck,span,[object Object],",span,[object Object],:,span,[object Object], true,,
,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],allowImportingTsExtensions,span,[object Object],",span,[object Object],:,span,[object Object], true,,
,span,[object Object],span,[object Object],    ",span,[object Object],isolatedModules,span,[object Object],",span,[object Object],:,span,[object Object], true,,
,span,[object Object],span,[object Object],    ",span,[object Object],moduleDetection,span,[object Object],",span,[object Object],:,span,[object Object], ",span,[object Object],force,span,[object Object],",span,[object Object],,,
,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],strict,span,[object Object],",span,[object Object],:,span,[object Object], true,,
,span,[object Object],span,[object Object],    ",span,[object Object],noUnusedLocals,span,[object Object],",span,[object Object],:,span,[object Object], true,,
,span,[object Object],span,[object Object],    ",span,[object Object],noUnusedParameters,span,[object Object],",span,[object Object],:,span,[object Object], true,,
,span,[object Object],span,[object Object],    ",span,[object Object],noFallthroughCasesInSwitch,span,[object Object],",span,[object Object],:,span,[object Object], true,,
,span,[object Object],span,[object Object],    ",span,[object Object],noUncheckedSideEffectImports,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/**/*.ts,span,[object Object],",span,[object Object],,,span,[object Object], ",span,[object Object],src/**/*.svelte,span,[object Object],",span,[object Object],],
,span,[object Object],span,[object Object],}
```

</code-tree>

This example demonstrates the simplest way to use Comark with Svelte - use the `Comark` component and pass it markdown content. The component handles parsing and rendering automatically using Svelte 5's `$state` and `$effect` runes.