Skip to content
Svelte component for rendering block content
JavaScript HTML
Branch: prototype
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
src added missing text html elements and fixed ol/ul bug Nov 4, 2019
.gitignore updated gitignore to include nested index.js Oct 25, 2019
LICENSE added license Oct 28, 2019 Update Nov 4, 2019
package.json 0.0.6 Nov 4, 2019
rollup.config.js including block-content-to-hyperscript as an external dependency Nov 4, 2019


Note: this package is in active development, will likely change and may contain errors.


At the moment, it seems the best approach is to install @sanity/block-content-to-hyperscript alongside this component.

Installing Svelte components as a devDependency seems to address this issue.

npm install @movingbrands/svelte-portable-text @sanity/block-content-to-hyperscript --save-dev

Usage example

  import BlockContent from "@movingbrands/svelte-portable-text";
  import Image from "./Image";
  import Link from "./Link";

  export let content;
  export const customSerializers = {
    types: {
      image: props => {
        return {
          component: Image,
          childNodes: props.children,
          props: {
            url: props.node.url
    marks: {
      link: props => {
        return {
          component: Link,
          childNodes: props.children,
          props: props.mark

  <BlockContent blocks={content} serializers={customSerializers} />

Consuming components

With Svelte apps (recommended approach)

This package.json has a "svelte" field pointing to src/index.svelte, which allows Svelte apps to import the source code directly, if they are using a bundler plugin like rollup-plugin-svelte or svelte-loader (where resolve.mainFields in your webpack config includes "svelte").

Apps which aren't using Svelte elsewhere

npm run build will bundle your component's source code into a plain JavaScript module (index.mjs) and a UMD script (index.js).

You can’t perform that action at this time.