Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including svelte-prose with all npm packages installed. Try it out:

require("svelte/package.json"); // svelte is a peer dependency. var svelteProse = require("svelte-prose")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

svelte-prose v0.2.0

Typography utilities for Svelte

svelte-prose

NPM Build

Typography utilities for Svelte.

Inspired by the U.S. Web Design System Prose component, svelte-prose is a collection of components for long-form typography.

Install

yarn add -D svelte-prose

Usage

<script>
  import Prose, { T } from "svelte-prose";
</script>

<Prose>
  <T.H1 text="Heading level 1" />
  <T.H2 text="Heading level 2" />
  <p>Some text content.</p>
</Prose>

Headings

A Heading component (T.H1, T.H2, T.H3, T.H4, T.H5, T.H6) automatically creates an id from the text prop.

<T.H1 text="Heading level 1" />
<!-- <h1 id="heading-level-1">Heading level 1</h1> -->

Table of Contents

The Prose component creates a two-tiered table of contents from headings.

Hide the default ToC to render your own:

<Prose hideToc let:toc>
  <nav>
    <ul>
      {#each toc as { id, text, children }}
      <li>
        <a href="#{id}">{text}</a>
        <ul>
          {#each children as child}
          <li>
            <a href="#{child.id}">{child.text}</a>
          </li>
          {/each}
        </ul>
      </li>
      {/each}
    </ul>
  </nav>
  <T.H1 text="Heading level 1" />
  <T.H2 text="Heading level 2" />
  <p>Some text content.</p>
</Prose>

API

Prose

Property nameValue
hideTocboolean (default: false)

T.H{1-6}

Property nameValue
textstring (default: undefined)

Forwarded events

  • on:click
  • on:mouseover
  • on:mouseenter
  • on:mouseout

Changelog

License

MIT

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free