An interactive playground showcasing React-EXE's capabilities with live code editing, multiple examples, and real-time preview.
- 🎮 Interactive Playground: Live code editing with Monaco Editor
- 📱 Responsive Design: Works on desktop and mobile devices
- 🎨 Multiple View Modes: Code-only, split view, or preview-only
- 📦 External Dependencies: Support for libraries like ECharts and Framer Motion
- 📄 Multi-file Components: Complex applications with multiple files
- 🔧 Real-time Preview: Instant feedback as you type
- 📱 Modern UI: Beautiful design with smooth animations
Important: Before installing dependencies in the examples folder, you need to build the parent react-exe package first.
From the examples directory:
cd examples
npm run setupThis will:
- Install parent package dependencies
- Build the parent package (
distfolder) - Install examples dependencies
- First, build the parent package:
# From the root directory
npm install
npm run build- Then install examples dependencies:
cd examples
npm install- Start the development server:
npm run dev- Open your browser and navigate to the URL shown in the terminal (usually
http://localhost:5173)
- Welcome to React-EXE: Interactive introduction with live editing demo
- Interactive Card: Beautiful card component with hover effects and animations
- Data Visualization: Interactive charts with ECharts and real-time data updates
- Todo App with Hooks: Complete todo application showcasing React hooks and state management
- Multi-File Dashboard: Complex dashboard built with multiple components and files
- Select an Example: Choose from the sidebar examples organized by category
- View Modes: Switch between Code, Split, or Preview views using the header buttons
- Edit Code: Click on the code editor to modify the code in real-time
- Run Code: Use the Run button to execute your changes (or they run automatically)
- Reset: Use the Reset button to restore the original example code
npm run dev- Start the development servernpm run build- Build for productionnpm run preview- Preview the production buildnpm run setup- Setup script for first-time installation
- React 18 - UI framework
- Vite - Build tool and dev server
- Monaco Editor - Code editor with TypeScript support
- Tailwind CSS - Utility-first CSS framework
- Lucide React - Beautiful icons
- React-EXE - The library being demonstrated
The examples are configured with:
- TypeScript support in Monaco Editor
- React and Tailwind CSS intellisense
- Custom theme (dark mode for code editor)
- External library support (ECharts, Framer Motion)
- This examples folder is excluded from the npm package bundle (see
.npmignorein the root directory) - Examples demonstrate various React-EXE features including external dependencies and multi-file support
- All examples include proper TypeScript types and error handling
The site serves Markdown for agentpad and stubfetch at:
https://slaps.dev/docs/agentpadand/docs/agentpad/...(sources insrc/site-docs/execpad/)https://slaps.dev/docs/stubfetchand/docs/stubfetch/...(sources insrc/site-docs/ghost-env/)
Legacy URLs /execpad and /ghost-env (product pages) redirect to /agentpad and /stubfetch. Legacy doc URLs /docs/execpad and /docs/ghost-env redirect to /docs/agentpad and /docs/stubfetch.
Content is rendered with Markdoc. agentpad and stubfetch sources live in their own repos—clone github.com/vgulerianb/agentpad and github.com/vgulerianb/stubfetch next to this project (folder names usually match the repo). Then sync package docs/ into the site:
npm run sync-docsPackage tests (Node + Python) — same layout as above; then:
npm run test:packagesRuns Vitest and pytest for whichever clones are present (agentpad / stubfetch, with legacy execpad / ghost-env names still supported).
To register another product, add markdown under src/site-docs/<id>/, then extend src/documentation/docRegistry.ts and App.tsx routes already cover /:product/docs/:slug?.
Feel free to add more examples or improve the existing ones! The examples are a great way to showcase React-EXE's capabilities.