All examples

Text blocks

Heading, rich text, list, quote and callout blocks rendered from validated data. Fictional example.com content.

Text blocks

blocks-text · blocks/TextBlockView

blocks text
Props
  • block
  • labels

Live example loads in an isolated same-origin preview frame.

Source (blocks-text/TextBlocksDemo.svelte) 
<script lang="ts">
import { TextBlockView } from '@texuli/blocks/text/renderers';
import { TEXT_FAMILY_SAMPLES } from './samples.ts';

/** Every text family block rendered from untrusted, validated data. */
</script>

<article class="demo" data-example="blocks-text" aria-label="Text blocks">
  {#each TEXT_FAMILY_SAMPLES as block, i (i)}
    <TextBlockView {block} />
  {/each}
</article>

<style>
  .demo {
    display: grid;
    gap: 1.5rem;
    max-inline-size: 42rem;
    padding: 1.5rem;
  }
</style>