playground-example

Example code playground built with Next.js, Monaco, and Freestyle Serverless Runs. It lets users pick a snippet, edit TypeScript in the browser, and execute that code server-side while seeing the returned result and console logs in the same UI.

The implementation is based on the accompanying guide in GUIDE.md and the published Freestyle docs article:

• Build a code playground with Freestyle Serverless Runs

What it does

• Embeds Monaco in a React client component for an in-browser TypeScript editor
• Fetches npm type definitions at runtime so IntelliSense works for packages like freestyle
• Ships a small snippet library that users can switch between instantly
• Executes user code with freestyle.serverless.runs.create
• Displays structured run results plus normalized console output

Stack

• Next.js App Router
• React
• @monaco-editor/react
• freestyle

Getting started

Install dependencies:

npm install

Create a local environment file and add your Freestyle API key:

cp .env .env.local

Then set:

FREESTYLE_API_KEY=your_key_here

Start the development server:

npm run dev

Open http://localhost:3000.

How execution works

1. The browser sends the current TypeScript snippet to a Next.js server action.
2. The server action creates a Freestyle Serverless Run with that source code.
3. The run executes in an isolated environment with the freestyle package available.
4. Outbound requests to api.freestyle.sh get the real API key injected server-side through egress transforms.
5. The UI renders the returned result and any captured logs.

This keeps credentials off the client while still letting users experiment with real API behavior.

Project structure

app/
	actions/
		executeSnippetAction.ts
		getNpmTypeDefsAction.ts
	components/
		Playground.tsx
	lib/
		examples.ts
		formatRunLogs.ts
	page.tsx
GUIDE.md

Key files:

• app/components/Playground.tsx wires together Monaco, snippet selection, execution state, and the output panel.
• app/actions/getNpmTypeDefsAction.ts fetches .d.ts files from jsDelivr so Monaco can provide autocomplete for npm packages.
• app/actions/executeSnippetAction.ts runs user code through Freestyle Serverless Runs.
• app/lib/examples.ts stores the built-in snippets.
• app/lib/formatRunLogs.ts normalizes mixed log values into readable strings.

Notes

• The playground currently registers types for the freestyle package at version 0.1.49.
• Monaco waits for both theme selection and type definitions before rendering, which avoids a wrong-theme flash and missing IntelliSense on first load.
• The example snippets demonstrate both nested serverless runs and VM creation.

Scripts

• npm run dev starts the local dev server.
• npm run build creates a production build.
• npm run start runs the production server.
• npm run lint runs ESLint.