Get help on Discord

Adding HTML to a document in Sanity using client.create() function and HTML to Portable Text Field plugin.

24 replies
Last updated: Nov 1, 2021
Does Sanity have any documentations adding HTML to a document via the 
client.create()
function?
AI Update

While Sanity doesn't have specific documentation about adding HTML directly to documents via client.create(), the recommended approach is to convert HTML to Portable Text format first using the @sanity/block-tools package.

Converting HTML to Portable Text

When you need to add HTML content to a Sanity document, you should:

  1. Install the required packages:
npm install @sanity/block-tools jsdom
  1. Convert HTML to Portable Text blocks using htmlToBlocks():
const {htmlToBlocks} = require('@sanity/block-tools')
const {JSDOM} = require('jsdom')

const html = '<p>Your HTML content here</p>'
const blocks = htmlToBlocks(html, blockContentType, {
  parseHtml: (html) => new JSDOM(html).window.document
})
  1. Create the document with converted content:
const doc = {
  _type: 'yourDocumentType',
  title: 'Document Title',
  body: blocks  // Your converted Portable Text
}

client.create(doc).then((res) => {
  console.log(`Document created with ID: ${res._id}`)
})

Why Portable Text Instead of HTML?

Sanity uses Portable Text as its structured content format rather than raw HTML. This provides several benefits:

  • Presentation-agnostic: Content can be rendered across different platforms (web, mobile, etc.)
  • Structured and queryable: You can query and manipulate content programmatically
  • Future-proof: Content isn't tied to HTML rendering

About client.create()

The client.create() method expects a plain JavaScript object representing the document. It must contain a _type attribute and may optionally contain an _id. For rich text content fields, that content should be in Portable Text format rather than raw HTML.

const doc = {
  _type: 'bike',
  name: 'Sanity Tandem Extraordinaire',
  seats: 2,
}

client.create(doc).then((res) => {
  console.log(`Bike was created, document ID is ${res._id}`)
})

Resources for HTML to Portable Text Conversion

So we have a route and useres can upload editor based content.When they hit submit we’d like to hit an api (using Nuxt) that would take the data from the form and create a document in Sanity.
Got it. So, basically what you're doing is taking the value of those fields in the form =&gt; creating an object that matches the schema of the document in your Content Lake =&gt; committing the changes to your Content Lake. You would have to do something like this:

const doc = {
  _id: uuid4(), //I use the uuid package to generate ids for docs. Remember to install/import at the top
  _type: '<your-document-type>',
  title: '<value-of-your-forms-title-field>',
  company: '<value-of-your-forms-company-field>',
  description: <value-of-your-description-field>'
}

client.create(doc).then(res => {console.log('Job was created', document id is ${res._id})}
The tricky part is your description field. I'm assuming that editor on your frontend creates HTML elements, so I suggest you set that field in your schema to an
HTML to Portable Text Field field. That plugin will allow you to pass in your HTML and have an on-the-fly conversion to Portable Text.
yup that makes sense!
user M
shoudl i be using the 
block-tools
That package isn't quite ready for public consumption yet, so I'd say stick with your current setup and use the HTML input for now!
That package isn't quite ready for public consumption yet, so I'd say stick with your current setup and use the HTML input for now!
ahh okay
user M
to confirm the approach you’r suggesting is for node.js?
and lastly, are there any docs or examples for this?
Sorry one more, if i understand will the field for schema actually be portable text if we want to create them in the backend as well?
Likely, since this is on your frontend, you'll want to use the JS client and execute the patch script when the form is submitted. There are a few different examples shown in the client documentation here . And yes, the HTML to Portable Text plugin will take in your HTML then store it as Portable Text in your Content Lake.
Likely, since this is on your frontend, you'll want to use the JS client and execute the patch script when the form is submitted. There are a few different examples shown in the client documentation here . And yes, the HTML to Portable Text plugin will take in your HTML then store it as Portable Text in your Content Lake.
ahh okay i can poke around. okay if i ping ya a little later?
Yeah, go for it!
Likely, since this is on your frontend, you'll want to use the JS client and execute the patch script when the form is submitted. There are a few different examples shown in the client documentation here . And yes, the HTML to Portable Text plugin will take in your HTML then store it as Portable Text in your Content Lake.
you’re the best 🙂
🙂
I've been looking for a solution to this too. I tried the HTML to Portable Text Field Plugin but it wasn't working well for me.So I dug into the source of the plugin to find out that there is no big deal.
Jumping from a package to another, it turns out that the plugin 
@sanity/block-tools
is well documented enough to provide examples for scripts.If you are running this on node.js, think to read
the doc until the `parseHtml` options where you can provide a node-based DOMParser.
I've been looking for a solution to this too. I tried the HTML to Portable Text Field Plugin but it wasn't working well for me.So I dug into the source of the plugin to find out that there is no big deal.
Jumping from a package to another, it turns out that the plugin 
@sanity/block-tools
is well documented enough to provide examples for scripts.If you are running this on node.js, think to read
the doc until the `parseHtml` options where you can provide a node-based DOMParser.
to follow up here (
user M
if you’re interested).
I realized I could use 
@sanity/block-tools
on the front-end before I submit the form data. Which worked very easily.At first I thought I needed to do it all on the backend but this is so much easier.
Awesome! Thanks for the update! Do you mind sharing your implementation so I can store it away for future use? 🙂
for ure!
for sure!

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?