Skip to main content

Integration with Next.js framework.

How to use Polotno Design editor with Next.js framework?

  1. Create isolated React component for all Polotno-related UI.
  2. Put that component inside components folder. Or it can be another folder. But it is important to NOT use pages folder!!!
  3. Use dynamic import for that component. It will help to avoid SSR errors. https://nextjs.org/docs/advanced-features/dynamic-import

Note: polotno is not designed for Server Side Rendering of UI. Most of its modules are browser-only. This is why we need to move editor component out of pages folder. Otherwise Next.js will try to render it on the server and it will fail.

import dynamic from 'next/dynamic';
const Editor = dynamic(() => import('../components/editor'), {
ssr: false,
});

export default function IndexPage() {
return (
<div>
<Editor />
</div>
);
}

Open Demo