This project scaffolds a Next.js App Router playground for editing Handlebars templates with Monaco Editor and previewing the rendered output side by side.
- App Router layout using the latest Next.js 16 runtime.
- Monaco Editor configured for Handlebars syntax with a sample template.
- Live preview panel that compiles the template with sample data loaded from JSON.
- Material UI (MUI) styling with a custom dark theme and Geist font.
- Responsive layout with clean, modern design.
- Framework: Next.js 16 (App Router)
- UI Library: Material UI v7
- Code Editor: Monaco Editor
- Template Engine: Handlebars
- Fonts: Geist Sans & Geist Mono
- Styling: Emotion (CSS-in-JS)
- Install dependencies:
npm install - Run the development server:
npm run dev - Open http://localhost:3000 to experiment with the split editor/preview experience.
Run npm run lint to execute ESLint with the Next.js configuration.
- The preview renders the template in the browser using the handlebars runtime.
- Edit public/sampleData.hbs to change the default Handlebars template and public/sampleContext.json to update the preview context.
- Theme customization can be done in app/theme.js.