Next.js Client Integration

Telva should run client-side in Next.js because it relies on browser APIs.

App Router pattern

'use client'

import dynamic from 'next/dynamic'

const Telva = dynamic(() => import('telva').then((m) => m.Telva), {
  ssr: false,
})

export default function EditorPage() {
  return (
    <main style={{ width: '100vw', height: '100vh' }}>
      <div style={{ position: 'relative', width: '100%', height: '100%' }}>
        <Telva />
      </div>
    </main>
  )
}

Pages Router pattern

Use the same dynamic import approach in pages-based apps and keep the editor in a sized container.

Common pitfalls

• No explicit parent height: editor mounts but appears empty
• Server rendering: can fail due to missing window/DOM APIs
• Hydration mismatch from conditional wrappers: keep wrapper structure stable

Optional: font picker with Google Fonts API

You can enable full Google Fonts listing in the properties panel using googleFontsApiKey:

<Telva googleFontsApiKey={process.env.NEXT_PUBLIC_GOOGLE_FONTS_API_KEY} />