feat: Server side rendering

Author: AKRkingCreated May 10, 2025Updated Dec 12, 2025

Describe the feature you'd like to request

To render server side I am using a simple instance, but novel extensions not working import {Mathematics} from "novel/extensions"; throws Mathematics.configure is not a function error

bash


// SimpleEditor.tsx
import React from 'react';
import { generateHTML } from '@tiptap/html';
import { type JSONContent } from '@tiptap/react';
import { simpleextensions } from './simple-extensions';

import 'katex/dist/katex.min.css';

// Define proper type for jsonContent
interface SimpleEditorProps {
  jsonContent: JSONContent;
}

const SimpleEditor = ({ jsonContent }: SimpleEditorProps) => {
  // Using the pre-configured extensions from extensions.ts
  const html = generateHTML(jsonContent, simpleextensions);

  return (
    <div 
      className="novel-content-container" 
      dangerouslySetInnerHTML={{ __html: html }}
    />
  );
};

export default SimpleEditor;

in my simple extension file

bash

//simple-extensions.ts
import StarterKit from '@tiptap/starter-kit'


import Youtube from '@tiptap/extension-youtube'
import {Mathematics} from "novel/extensions"; 
import { cx } from 'class-variance-authority'


const mathematics = Mathematics.configure({ 
    HTMLAttributes: {
      class: cx("text-foreground rounded p-1 hover:bg-accent cursor-pointer"), 
    },
    katexOptions: {
      throwOnError: false, 
    },
  });

export const simpleextensions = [
    StarterKit, 
    Youtube,
    mathematics 
  ];

And i see a new extension called @tiptap/static-renderer, is this useful,can it work with novel?

Describe the solution you'd like to see

Render novel jsoncontent on server side, My four months of ambition have come to a standstill here. Any direction will be appreciated

Additional information

No response

Source: steven-tey/novel

View original on GitHub View discussion on GitHub