Initial react editor Next.js template

app/editor/page.tsx

@@ -0,0 +1,6 @@
+import PageEditor from '@/components/page-editor';
+import page from '../page.json';
+
+export default function EditorPage() {
+  return <PageEditor pagePath="app/page.json" page={page} />;
+}

app/globals.css

@@ -0,0 +1,59 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --border: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --radius: 0.625rem;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-border: var(--border);
+  --color-ring: var(--ring);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --font-sans: Arial, Helvetica, sans-serif;
+}
+
+@layer base {
+  * {
+    border-color: var(--border);
+  }
+
+  body {
+    background: var(--background);
+    color: var(--foreground);
+  }
+}
+
+.page-shell {
+  width: min(100% - 2rem, 72rem);
+  margin-inline: auto;
+}
+
+@media (min-width: 768px) {
+  .page-shell {
+    width: min(100% - 4rem, 72rem);
+  }
+}

app/layout.tsx

@@ -0,0 +1,19 @@
+import type { Metadata } from 'next';
+import { site } from '@/config/site';
+import './globals.css';
+
+export const metadata: Metadata = {
+  metadataBase: new URL(site.url),
+  title: site.name,
+  description: site.description,
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body className="min-h-screen bg-background font-sans text-foreground antialiased">
+        {children}
+      </body>
+    </html>
+  );
+}

app/page.json

@@ -0,0 +1,20 @@
+{
+  "root": {
+    "props": {
+      "title": "Next.js Editor Starter",
+      "description": "A minimal Next.js template powered by React Editor."
+    }
+  },
+  "content": [
+    { "type": "header", "props": { "id": "header" }, "synced": true },
+    {
+      "type": "starter",
+      "props": {
+        "id": "starter",
+        "logoUrl": "/next.svg",
+        "message": "To edit this page navigate to /editor."
+      }
+    },
+    { "type": "footer", "props": { "id": "footer" }, "synced": true }
+  ]
+}

app/page.tsx

@@ -0,0 +1,9 @@
+import PageRender from '@/components/page-render';
+import { pageMetadata } from '@/lib/page-metadata';
+import page from './page.json';
+
+export const metadata = pageMetadata(page, { path: '/' });
+
+export default function Page() {
+  return <PageRender page={page} />;
+}