Demos

All Demos

font-weight:500">color:#ff7b72;font-weight:500">import React, { useState, useEffect } font-weight:500">color:#ff7b72;font-weight:500">from font-weight:500">color:#a5d6ff">"react";
font-weight:500">color:#ff7b72;font-weight:500">import { createRoot } font-weight:500">color:#ff7b72;font-weight:500">from font-weight:500">color:#a5d6ff">"react-dom/client";
font-weight:500">color:#ff7b72;font-weight:500">import { Router, Route, Switch } font-weight:500">color:#ff7b72;font-weight:500">from font-weight:500">color:#a5d6ff">"./router";
font-weight:500">color:#ff7b72;font-weight:500">import { ThemeProvider } font-weight:500">color:#ff7b72;font-weight:500">from font-weight:500">color:#a5d6ff">"./theme";

font-weight:500">color:#a5d6ff">"font-weight:500">color:#8b949e;font-style:italic">// Application entry point
font-weight:500">color:#ff7b72;font-weight:500">interface AppConfig {
  apiUrl: string;
  version: string;
  features: string[];
}

font-weight:500">color:#ff7b72;font-weight:500">const config: AppConfig = {
  apiUrl: font-weight:500">color:#a5d6ff">"https:font-weight:500">color:#8b949e;font-style:italicfont-weight:500">color:#a5d6ff">">//api.example.com",
  version: font-weight:500">color:#a5d6ff">"font-weight:500">color:#79c0ff">2.0.font-weight:500">color:#79c0ff">0",
  features: [font-weight:500">color:#a5d6ff">"auth", font-weight:500">color:#a5d6ff">"analytics", font-weight:500">color:#a5d6ff">"notifications"],
};

font-weight:500">color:#ff7b72;font-weight:500">function App() {
  font-weight:500">color:#ff7b72;font-weight:500">const [isReady, setIsReady] = useState(false);
  font-weight:500">color:#ff7b72;font-weight:500">const [user, setUser] = useState<User | font-weight:500">color:#ff7b72;font-weight:500">null>(font-weight:500">color:#ff7b72;font-weight:500">null);

  useEffect(() => {
    font-weight:500">color:#ff7b72;font-weight:500">async font-weight:500">color:#ff7b72;font-weight:500">function init() {
      font-weight:500">color:#ff7b72;font-weight:500">try {
        font-weight:500">color:#ff7b72;font-weight:500">const session = font-weight:500">color:#ff7b72;font-weight:500">await checkSession();
        font-weight:500">color:#ff7b72;font-weight:500">if (session.valid) {
          setUser(session.user);
        }
      } font-weight:500">color:#ff7b72;font-weight:500">catch (error) {
        console.error(font-weight:500">color:#a5d6ff">"Init failed:", error);
      } finally {
        setIsReady(true);
      }
    }
    init();
  }, []);

  font-weight:500">color:#ff7b72;font-weight:500">if (!isReady) {
    font-weight:500">color:#ff7b72;font-weight:500">return <LoadingScreen />;
  }

  font-weight:500">color:#ff7b72;font-weight:500">return (
    <ThemeProvider>
      <Router>
        <Switch>
          <Route path=font-weight:500">color:#a5d6ff">"/" component={Home} />
          <Route path=font-weight:500">color:#a5d6ff">"/dashboard" component={Dashboard} />
          <Route path=font-weight:500">color:#a5d6ff">"/settings" component={Settings} />
        </Switch>
      </Router>
    </ThemeProvider>
  );
}

font-weight:500">color:#a5d6ff">"font-weight:500">color:#8b949e;font-style:italic">// Render
font-weight:500">color:#ff7b72;font-weight:500">const root = createRoot(document.getElementById(font-weight:500">color:#a5d6ff">"root")!);
root.render(<App />);

import React, { useState, useEffect } from "react";
import { createRoot } from "react-dom/client";
import { Router, Route, Switch } from "./router";
import { ThemeProvider } from "./theme";

// Application entry point
interface AppConfig {
  apiUrl: string;
  version: string;
  features: string[];
}

const config: AppConfig = {
  apiUrl: "https://api.example.com",
  version: "2.0.0",
  features: ["auth", "analytics", "notifications"],
};

function App() {
  const [isReady, setIsReady] = useState(false);
  const [user, setUser] = useState<User | null>(null);

useEffect(() => {
    async function init() {
      try {
        const session = await checkSession();
        if (session.valid) {
          setUser(session.user);
        }
      } catch (error) {
        console.error("Init failed:", error);
      } finally {
        setIsReady(true);
      }
    }
    init();
  }, []);

if (!isReady) {
    return <LoadingScreen />;
  }

return (
    <ThemeProvider>
      <Router>
        <Switch>
          <Route path="/" component={Home} />
          <Route path="/dashboard" component={Dashboard} />
          <Route path="/settings" component={Settings} />
        </Switch>
      </Router>
    </ThemeProvider>
  );
}

// Render
const root = createRoot(document.getElementById("root")!);
root.render(<App />);

$ tsc --watch

Starting compilation in watch mode...

Found 0 errors. Watching for file changes.

Ln 1, Col 1TypeScriptUTF-82 Spaces

58 lines

View Prompt

Create a code editor with syntax highlighting for JavaScript/TypeScript. Include: line numbers, a file tab bar with multiple open files, a minimap-style scrollbar, bracket matching highlights, a bottom status bar showing line/col/language/encoding, and a command palette triggered by Ctrl+K. Support multiple themes (light/dark/monokai). Render syntax highlighting using regex tokenization. Use monospace font, no external libraries.

Built with GPT-5.3