pop-svelte

@fractaldesign/pop-svelte brings fractalpop into Svelte and SvelteKit. It ships four components and one action. Everything renders on the server and produces the same markup on the client, so highlighted code has no hydration cost and no flash.

Install

npm install @fractaldesign/pop-svelte fractalpop

@fractaldesign/pop is a runtime dependency; svelte 5 is a peer dependency.

Components at a glance

All four accept a theme and render through the same token classes, so one theme styles every component. See Theming.

Highlight

Highlight is the simplest component: give it code and a lang, and it renders <pre class="fp"><code>…</code></pre>.

<script lang="ts">
  import { Highlight } from '@fractaldesign/pop-svelte'
</script>

<Highlight code={source} lang="sass" highlightLines={[2, 3]} />

Code

Code presents read-only code with an optional macOS-style header, line numbers, and highlighted line ranges.

<script lang="ts">
  import { Code } from '@fractaldesign/pop-svelte'
</script>

<Code code={source} lang="ts" title="example.ts" controls lineNumbers highlightLines={[[3, 5]]} />

Editor

Editor overlays a transparent <textarea> on a live Code view. Typing updates the highlight; Tab indents and Shift+Tab outdents. Use bind:value for two-way binding.

<script lang="ts">
  import { Editor } from '@fractaldesign/pop-svelte'
  let source = $state("const greet = (name) => `Hi ${name}`")
</script>

<Editor bind:value={source} lang="ts" title="playground.ts" />

The named export indentCode(value, start, end, indent, outdent?) is available if you want the same Tab logic elsewhere.

FileTree

FileTree is an accessible tree (arrow keys, type-ahead, role="tree") that infers folders from flat file paths. Compose it with Code to build a file browser.

<script lang="ts">
  import { FileTree, Code } from '@fractaldesign/pop-svelte'
  const files = { 'src/app.ts': '…', 'src/lib/util.ts': '…' }
  let active = $state('src/app.ts')
</script>

<FileTree
  paths={Object.keys(files)}
  activeFile={active}
  onactivefilechange={(path) => (active = path)}
/>
<Code code={files[active]} lang="ts" lineNumbers />

Custom file icons

The icon snippet receives each TreeItem and renders in place of the default glyph. Use it for VS Code-style, file-type-aware icons.

{#snippet fileIcon(item)}
  {#if item.directory}📁{:else if item.name.endsWith('.svelte')}🟠{:else}📄{/if}
{/snippet}

<FileTree {paths} {activeFile} {onactivefilechange} icon={fileIcon} />

The @fractaldesign/pop action

For code you only have on the client — pasted or generated at runtime — the @fractaldesign/pop action highlights an element’s text content in place.

<script lang="ts">
  import { fractalpop } from '@fractaldesign/pop-svelte'
</script>

<pre use:fractalpop={{ lang: 'ts' }}>{code}</pre>

Theming

A theme is a palette, or a { light, dark } pair. Pass it as the theme prop, and the component writes the matching --fp-* variables inline. A pair renders with light-dark(), so it follows the surrounding color-scheme.

import type { Theme } from '@fractaldesign/pop-svelte'

const oneDark: Theme = {
  background: '#282c34',
  foreground: '#abb2bf',
  keyword: '#c678dd',
  string: '#98c379',
  comment: '#5c6370',
  // class, property, entity, jsxliterals, sign …
}

If you prefer plain CSS, skip the theme prop and set the variables yourself. The components read these variables for their chrome:

The helper themeStyle(theme) returns the inline style string the components use, if you need it directly.

Related Packages

• fractalpop — Core highlighter engine
• @fractaldesign/pop-mdsvex — Highlighter hook for MDSveX in SvelteKit
• @fractaldesign/pop-remark — Remark plugin for Markdown & MDX