feat(editor): in-browser editor playground with preview, and project handling

Author: moatorres

.github/workflows/nxcloud.yaml

@@ -1,9 +1,5 @@
 name: NxCloud
 
-env:
-  APP_CONFIG_FILE: 'apps/blog/info.json'
-  NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
-
 on:
   push:
     branches:
@@ -17,19 +13,25 @@ permissions:
 jobs:
   main:
     runs-on: ubuntu-latest
+
+    env:
+      NX_BASE: origin/master
+      NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
+
     steps:
       - uses: actions/checkout@v4
         with:
           fetch-depth: 0
+          filter: tree:0
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v6
         with:
-          node-version: 22.8.0
+          node-version: 22.20.0
 
       - uses: pnpm/action-setup@v4
         name: Install pnpm
         with:
-          version: 9.15.4
+          version: 10.19.0
           run_install: false
 
       - name: Get pnpm store directory
@@ -44,8 +46,11 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-pnpm-store-
 
+      - run: pnpm dlx nx-cloud start-ci-run --distribute-on="3 linux-medium-js" --stop-agents-after="build"
+
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
       - uses: nrwl/nx-set-shas@v4
+      - run: npx nx-cloud record -- nx format:check
       - run: pnpm exec nx affected -t lint test build

.nvmrc

@@ -1 +1 @@
-v22.15.1
+v22.20.0

.nxignore

@@ -0,0 +1 @@
+playground

.prettierignore

@@ -4,6 +4,8 @@
 /.nx/cache
 /.nx/workspace-data
 .next
+next-env.d.ts
 pnpm-lock.yaml
 dist
 node_modules
+playground

.vscode/settings.json

@@ -1,21 +1,23 @@
 {
   "css.customData": [".vscode/tailwind.json"],
-  "editor.tabSize": 2,
-  "editor.formatOnSave": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "css.validate": false,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit"
+    "source.fixAll": "explicit",
+    "source.organizeImports": "explicit"
   },
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "editor.inlineSuggest.enabled": true,
   "// activates tailwindcss intellisense for libraries": "",
   "editor.quickSuggestions": {
     "strings": true
   },
-  "css.validate": false,
-  "editor.inlineSuggest.enabled": true,
+  "editor.tabSize": 2,
+  "eslint.format.enable": true,
+  "eslint.validate": ["typescript", "javascript", "tsx", "jsx", "json"],
   "// adds tailwindcss intellisense support within cva function calls": "",
   "tailwindCSS.experimental.classRegex": [
     ["cva\\(((?:[^()]|\\([^()]*\\))*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
     ["cx\\(((?:[^()]|\\([^()]*\\))*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
-  ],
-  "eslint.validate": ["json"]
+  ]
 }

apps/blog/eslint.config.mjs

@@ -1,22 +1,25 @@
-import { FlatCompat } from '@eslint/eslintrc'
-import { dirname } from 'path'
-import { fileURLToPath } from 'url'
-import js from '@eslint/js'
-import { fixupConfigRules } from '@eslint/compat'
+import { defineConfig } from 'eslint/config'
+
 import nx from '@nx/eslint-plugin'
+import nextPlugin from 'eslint-config-next'
+import reactHooksPlugin from 'eslint-plugin-react-hooks'
 import baseConfig from '../../eslint.config.mjs'
-const compat = new FlatCompat({
-  baseDirectory: dirname(fileURLToPath(import.meta.url)),
-  recommendedConfig: js.configs.recommended,
-})
 
-// eslint-disable-next-line import/no-anonymous-default-export
-export default [
-  ...fixupConfigRules(compat.extends('next')),
-  ...fixupConfigRules(compat.extends('next/core-web-vitals')),
+export default defineConfig([
   ...baseConfig,
   ...nx.configs['flat/react-typescript'],
+  nextPlugin,
+  {
+    plugins: {
+      'react-hooks': reactHooksPlugin,
+    },
+    rules: {
+      'react-hooks/rules-of-hooks': 'warn',
+      'react-hooks/exhaustive-deps': 'warn',
+      'react-hooks/set-state-in-effect': 'warn',
+    },
+  },
   {
     ignores: ['.next/**/*', './src/data/**/*', './public/_*', 'next-env.d.ts'],
   },
-]
+])

apps/blog/index.d.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 declare module '*.svg' {
   const content: any
   export const ReactComponent: any

apps/blog/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference path="./.next/types/routes.d.ts" />
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/blog/next.config.mjs

@@ -1,11 +1,10 @@
 // @ts-check
-import { composePlugins, withNx } from '@nx/next'
-
 import createMDX from '@next/mdx'
-import remarkGfm from 'remark-gfm'
-import remarkSugarHigh from 'remark-sugar-high'
+import { composePlugins } from '@nx/next'
 import rehypeAutolinkHeadings from 'rehype-autolink-headings'
 import rehypeSlug from 'rehype-slug'
+import remarkGfm from 'remark-gfm'
+import remarkSugarHigh from 'remark-sugar-high'
 
 const ONE_YEAR_IN_SECONDS = 60 * 60 * 24 * 365
 
@@ -33,11 +32,21 @@ const nextConfig = {
           },
         ],
       },
+      {
+        source: '/:path*',
+        headers: [
+          {
+            key: 'Cross-Origin-Embedder-Policy',
+            value: 'require-corp',
+          },
+          {
+            key: 'Cross-Origin-Opener-Policy',
+            value: 'same-origin',
+          },
+        ],
+      },
     ]
   },
-  nx: {
-    svgr: false,
-  },
   pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
   poweredByHeader: false,
   reactStrictMode: true,
@@ -58,7 +67,10 @@ const nextConfig = {
   webpack: (config, { dev }) => {
     // resolve imports with extension names on dev mode (e.g. import ansi from "./ansi.js")
     config.resolve.extensionAlias = {
-      '.js': ['.ts', '.tsx', '.js'],
+      '.js': ['.ts', '.tsx', '.js', '.jsx'],
+      '.mjs': ['.mts', '.mjs'],
+      '.cjs': ['.cts', '.cjs'],
+      '.jsx': ['.tsx', '.jsx'],
     }
     return config
   },
@@ -83,6 +95,6 @@ const withMdx = createMDX({
   },
 })
 
-const withPlugins = composePlugins(withNx, withMdx)
+const withPlugins = composePlugins(withMdx)
 
 export default withPlugins(nextConfig)

apps/blog/package.json

@@ -4,54 +4,59 @@
   "private": true,
   "description": "A blog built with Next.js and MDX.",
   "dependencies": {
-    "@effect/platform-node": "^0.86.4",
-    "@effect/printer": "^0.44.8",
-    "@effect/printer-ansi": "^0.44.8",
-    "@effect/rpc": "^0.62.4",
-    "@effect/typeclass": "^0.35.8",
+    "@blog/utils": "workspace:*",
+    "@dprint/formatter": "^0.4.1",
+    "@effect-atom/atom-react": "^0.4.0",
+    "@effect/cli": "^0.72.0",
+    "@effect/platform": "^0.93.0",
+    "@effect/platform-node": "^0.100.0",
+    "@monaco-editor/react": "^4.7.0",
+    "@shadcn/ui": "workspace:*",
     "@vercel/analytics": "^1.5.0",
-    "@vercel/edge-config": "^1.4.0",
+    "@vercel/edge-config": "^1.4.3",
     "@vercel/speed-insights": "^1.2.0",
-    "bcryptjs": "^3.0.2",
+    "@webcontainer/api": "^1.6.1",
+    "@xterm/addon-fit": "^0.10.0",
+    "@xterm/xterm": "^5.5.0",
+    "bcryptjs": "^3.0.3",
     "class-variance-authority": "^0.7.1",
-    "codice": "^1.3.2",
-    "date-fns": "^3.6.0",
-    "effect": "^3.16.8",
-    "esbuild": "^0.25.10",
-    "framer-motion": "^12.7.4",
-    "jose": "^6.0.11",
-    "lucide-react": "^0.503.0",
-    "next": "^15.5.4",
+    "codice": "^1.5.2",
+    "date-fns": "^4.1.0",
+    "effect": "^3.19.2",
+    "esbuild": "^0.25.12",
+    "file-saver": "^2.0.5",
+    "framer-motion": "^12.23.24",
+    "jose": "^6.1.0",
+    "jotai": "^2.15.1",
+    "jszip": "^3.10.1",
+    "lucide-react": "^0.553.0",
+    "monaco-editor": "^0.54.0",
+    "next": "^16.0.1",
     "next-themes": "^0.4.6",
-    "react": "^19.1.1",
-    "react-day-picker": "^8.10.1",
-    "react-dom": "^19.1.1",
+    "react": "^19.2.0",
+    "react-day-picker": "^9.7.0",
+    "react-dom": "^19.2.0",
+    "react-resizable-panels": "^3.0.6",
     "recharts": "^2.15.3",
-    "sonner": "^2.0.3",
-    "tailwindcss": "^4.1.4",
-    "unfurl.js": "^6.4.0"
+    "sonner": "^2.0.7",
+    "tailwindcss": "^4.1.17",
+    "zod": "^4.1.12"
   },
   "devDependencies": {
-    "@blog/utils": "workspace:*",
-    "@effect/cli": "^0.64.2",
-    "@effect/platform": "^0.91.1",
-    "@mdx-js/loader": "^3.1.0",
-    "@mdx-js/react": "^3.1.0",
-    "@next/mdx": "^15.3.1",
-    "@shadcn/ui": "workspace:*",
-    "@tailwindcss/postcss": "^4.1.4",
-    "@tailwindcss/typography": "^0.5.16",
+    "@mdx-js/loader": "^3.1.1",
+    "@mdx-js/react": "^3.1.1",
+    "@next/mdx": "^16.0.1",
+    "@tailwindcss/postcss": "^4.1.17",
+    "@tailwindcss/typography": "^0.5.19",
+    "@types/file-saver": "^2.0.7",
     "@types/mdx": "^2.0.13",
-    "@zod/mini": "4.0.0-beta.20250430T185432",
-    "clsx": "^2.1.1",
-    "dotenv": "^16.5.0",
+    "dotenv": "^17.2.3",
     "image-size": "^2.0.2",
-    "prettier": "^3.6.2",
+    "postcss": "^8.5.6",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
     "remark-gfm": "^4.0.1",
     "remark-sugar-high": "^0.6.0",
-    "tailwind-merge": "^3.2.0",
-    "tw-animate-css": "^1.2.9"
+    "tw-animate-css": "^1.4.0"
   }
 }