Editor Renderer

You can store your content as a JSON object or as a good old HTML string. Both work fine. And of course, you can pass both formats to the editor to restore your content.

If you need to render the content for example to generate the HTML for a blog post, which has been written in Tiptap, you’ll probably want to do just that without an actual editor instance.

That’s what the Renderer is for. It’s a helper function which renders HTML without an actual editor instance.

Color styles

<State initial={{ data: "" }}>
  {({ state, setState }) => (
    <div>
      <Renderer raw={
        {"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"helo"},{"type":"text","marks":[{"type":"textStyle","attrs":{"color":"#d42323"}}],"text":"o"}]}]}
}/>

    </div>
  )}
</State>

Links marks

<State initial={{ data: "" }}>
  {({ state, setState }) => (
    <div>
      <Renderer raw={
        {"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"hola "},{"type":"text","marks":[{"type":"link","attrs":{"href":"http://fkfjfj.com","target":"_blank","class":null}}],"text":"http://fkfjfj.com"},{"type":"text","text":" "},{"type":"text","marks":[{"type":"link","attrs":{"href":"http://google.com","target":"_blank","class":null}}],"text":"google.com"}]}]}
      }/>
    </div>
  )}
</State>

Image Block

<State initial={{ data: "" }}>
  {({ state, setState }) => (
    <div>
      <Renderer raw={
        {"type":"doc","content":[{"type":"ImageBlock","attrs":{"url":"https://miro.medium.com/v2/resize:fit:1400/format:webp/1*cg_wdzpS-Me6_CQyL1pHiA.jpeg","src":null,"width":1686,"height":1580,"loading":true,"loading_progress":0,"caption":"caption!","direction":"center","file":{},"aspect_ratio":{"width":1000,"height":937.129300118624,"ratio":93.7129300118624}}}]}
      }/>
    </div>
  )}
</State>

Integraiton content

<State initial={{ data: "" }}>
  {({ state, setState }) => (
    <div className="break-words">
      <Renderer raw={
        contentJSON
      }/>
    </div>
  )}
</State>

Integration embeds

<State initial={{ data: "" }}>
  {({ state, setState }) => (
    <div className="break-words">
      <Renderer raw={
        {"type":"doc","content":[{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Hello"}]},{"type":"VideoBlock","attrs":{"embed_data":{"provider_url":"https://www.youtube.com/","height":113,"type":"video","html":"<iframe width=\"200\" height=\"113\" src=\"https://www.youtube.com/embed/SjhIlw3Iffs?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen title=\"GPT-4 Creator Ilya Sutskever\"></iframe>","author_name":"Eye on AI","author_url":"https://www.youtube.com/@eyeonai3425","thumbnail_url":"https://i.ytimg.com/vi/SjhIlw3Iffs/hqdefault.jpg","title":"GPT-4 Creator Ilya Sutskever","thumbnail_width":480,"width":200,"provider_name":"YouTube","thumbnail_height":360,"version":"1.0","url":"https://www.youtube.com/watch?v=SjhIlw3Iffs"},"provisory_text":"https://www.youtube.com/watch?v=SjhIlw3Iffs"},"content":[{"type":"text","marks":[{"type":"link","attrs":{"href":"https://www.youtube.com/watch?v=SjhIlw3Iffs","target":"_blank","class":null}}],"text":"https://www.youtube.com/watch?v=SjhIlw3Iffs"}]},{"type":"paragraph","content":[{"type":"text","text":"hellok"}]},{"type":"paragraph"}]}
      }/>
    </div>
  )}
</State>

<State initial={{ data: "" }}>
  {({ state, setState }) => (
    <div className="break-words">
      <Renderer raw={
        {"type":"doc","content":[{"type":"paragraph"},{"type":"EmbedBlock","attrs":{"embed_data":{"error":"no matching providers found","url":"https://github.com/michelson"},"provisory_text":"https://github.com/michelson"},"content":[{"type":"text","marks":[{"type":"link","attrs":{"href":"https://github.com/michelson","target":"_blank","class":null}}],"text":"https://github.com/michelson"}]},{"type":"paragraph"}]}
      }/>
    </div>
  )}
</State>

file

<State initial={{ data: "" }}>
  {({ state, setState }) => (
    <div className="break-words">
      <Renderer raw={
        {"type":"doc","content":[{"type":"paragraph"},{"type":"FileBlock","attrs":{"url":"blob:http://localhost:8080/fda338c3-79d5-4994-bb8a-8f1e6ebcfd52","src":null,"width":"","height":"","loading":true,"loading_progress":0,"caption":"caption!","direction":"center","file":{},"aspect_ratio":{"width":200,"height":200,"ratio":100}}}]}
      }/>
    </div>
  )}
</State>

Video Recorder

<State initial={{ data: "" }}>
  {({ state, setState }) => (
    <div className="break-words">
      <Renderer raw={
        {"type":"doc","content":[{"type":"VideoRecorderBlock","attrs":{
          "url": "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
          "src":null,
          "width":"","height":"","loading":false,"loading_progress":0,"caption":null,"direction":"center","file":null},"content":[{"type":"text","text":"kokokk"}]}]}
      }/>
    </div>
  )}
</State>