Keystone Svelte Renderer

This is an unofficial Svelte 5 port of Keystonejs's Document Renderer.

Installation

npm i -D keystone-svelte-renderer

Usage

<script lang="ts">
    import Renderer from 'keystone-svelte-renderer';

    // this should be replaced with your Keystone Document content
    import { content } from './sample-content.js';
</script>

<article class="my-4 px-8">
    <Renderer document={content.document}></Renderer>
</article>

Styling

Currently styling is left to the user. The library is only concerned with rendering they Keystone document to the DOM.

Here's a sample style for the above code.

<style lang="postcss">
    article :global {
        h1 {
            @apply my-4 scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl;
        }

        h2 {
            @apply my-4 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0;
        }

        h3 {
            @apply my-3 scroll-m-20 text-2xl font-semibold tracking-tight;
        }

        h4 {
            @apply my-2 scroll-m-20 text-xl font-semibold tracking-tight;
        }

        h5 {
            @apply my-2 scroll-m-20 text-lg font-medium tracking-tight;
        }

        h6 {
            @apply my-2 scroll-m-20 font-medium tracking-tight;
        }

        p {
            @apply leading-7 [&:not(:first-child)]:mt-6;
        }

        em {
            @apply italic;
        }

        u {
            @apply underline;
        }

        strong {
            @apply font-bold;
        }

        s {
            @apply line-through;
        }

        sub {
            @apply text-sm;
        }

        sup {
            @apply text-sm;
        }

        a {
            @apply font-medium underline underline-offset-4;
        }

        ul {
            @apply my-6 ml-6 list-disc [&>li]:mt-2;
        }

        ol {
            @apply my-6 ml-6 list-decimal [&>li]:mt-2;
        }

        blockquote {
            @apply mt-6 border-l-2 pl-6 italic;
        }
    }
</style>

Experimental

You can override the default renderers.

<!-- CustomParagraph.svelte -->
<script lang="ts">
    import type { Snippet } from 'svelte';

    interface Props {
        children?: Snippet;
        [key: string]: unknown;
    }

    let { tag, children, ...restAttributes }: Props = $props();
</script>

<!-- your paragraph with some custom styling -->
<p class="text-red-500" {...restAttributes}>
    {@render children?.()}
</p>

<script lang="ts">
    import Renderer, { defaultRenderer } from 'keystone-svelte-renderer';
  import CustomParagraph from './CustomParagraph.svelte'

  // override the paragraph's renderer
  const customRenderer== {
    ...defaultRenderers
    paragraph: CustomParagraph
  } 

    // this should be replaced with your Keystone Document content
    import { content } from './sample-content.js';
</script>

<article class="my-4 px-8">
    <Renderer document={content.document} renderers={customRenderers}></Renderer>
</article>

Node types that can be overridden

Node types (or custom components) outside the above list are not supported as of now.