Getting started
Next.js
Use Polotno Design Editor in a Next.js app (App Router)
How to use Polotno Design editor with Next.js?
Demo repository: polotno-next
1) Install dependencies
## if you use next.js 14:
npm install polotno@latest
## if you use next.js 15 or 16
npm install [email protected]2) Create an Editor component (client-only)
Create components/editor.tsx. Do not place it inside pages or app to avoid server-side rendering.
import React from 'react';
import { PolotnoContainer, SidePanelWrap, WorkspaceWrap } from 'polotno';
import { Toolbar } from 'polotno/toolbar/toolbar';
import { PagesTimeline } from 'polotno/pages-timeline';
import { ZoomButtons } from 'polotno/toolbar/zoom-buttons';
import { SidePanel } from 'polotno/side-panel';
import { Workspace } from 'polotno/canvas/workspace';
import 'polotno/polotno.blueprint.css';
import { createStore } from 'polotno/model/store';
const store = createStore({
key: 'YOUR_API_KEY', // create an API key at https://polotno.com/cabinet/
// you can hide back-link on a paid license
// but it will be good if you can keep it for Polotno project support
showCredit: true,
});
store.addPage();
export const Editor = () => {
return (
<PolotnoContainer style={{ width: '100vw', height: '100vh' }}>
<SidePanelWrap>
<SidePanel store={store} />
</SidePanelWrap>
<WorkspaceWrap>
<Toolbar store={store} downloadButtonEnabled />
<Workspace store={store} />
<ZoomButtons store={store} />
<PagesTimeline store={store} />
</WorkspaceWrap>
</PolotnoContainer>
);
};
export default Editor;3) Use dynamic import in a client component
'use client';
import dynamic from 'next/dynamic';
const Editor = dynamic(() => import('../components/editor'), {
ssr: false,
});
export default function Home() {
return <Editor />;
}Disable ReactStrictMode in Next.js 15 or 16
Disable ReactStrictMode in your next.config.js file:
module.exports = {
reactStrictMode: false,
};At the current moment Polotno does not support ReactStrictMode in Next.js 15 or 16. It is a known issue and we are working on it.