Server rendering

Version 1 renders components in the browser only (DECISIONS D6). Static markup works anywhere; the elements and the React components need a client-only spot.

What runs where

Layer	On the server	In the browser
CSS classes	Render anywhere: they are plain HTML and CSS.	Complete without JavaScript; `ripple.js` adds the press ripple.
Custom elements	Importing an entry is safe: registration is skipped where there is no `window`. The tag is output as written.	The element renders its markup when its entry loads.
React	Not supported: no server rendering or React Server Components.	Mount the components on the client.

The React components carry no 'use client' directive. Nothing here is meant to be rendered on the server, so mount them from a module of your own that only runs in the browser.

Astro

Mount React components with client:only="react". The other client directives render on the server first. See the Astro guide.

Next.js (App Router)

Wrap the components in your own client component, and load that component without server rendering:

// app/toolbar-client.tsx
'use client';

import dynamic from 'next/dynamic';

export const Toolbar = dynamic(() => import('./toolbar'), { ssr: false });

// app/toolbar.tsx: only ever loaded in the browser
import { FloatingToolbar, Icon, IconButton } from '@kyralabs/m3exp-web/react';

export default function Toolbar() {
  return (
    <FloatingToolbar aria-label="Formatting">
      <IconButton aria-label="Bold"><Icon name="format_bold" /></IconButton>
      <IconButton aria-label="Italic"><Icon name="format_italic" /></IconButton>
    </FloatingToolbar>
  );
}

Import the CSS once in the root layout (app/layout.tsx): import '@kyralabs/m3exp-web/css/index.css';. Pages can still server-render the m3e-css markup around the client-only parts.

Other frameworks

The same rule applies everywhere: server-render the static markup if you like, and create the elements and React components only in the browser (a client-only route, a lazy import after mount, or the framework's equivalent of ssr: false).

Server rendering may come in a later version; until then, D6 keeps the components free of server-specific code.