Code Editor

Every Micro-Detail of VS Code. Plus AI That Lives in Every Line.

A Monaco-powered editor with inline AI completions, contextual gutter actions, live inline widgets, and every power feature you expect. Six integrated layers that reveal as you scroll.

import { useState } from 'react';

import { motion } from 'framer-motion';

function App() {

return <motion.div />

}

The engine powering every keystroke

Monaco Editor Core

Built on the same Monaco editor that powers VS Code. Full syntax highlighting, IntelliSense, bracket matching, code folding, and language server protocol support out of the box.

const result =

await fetchUserData(userId);

AI suggestion

Suggestions that understand your intent

Inline AI Completions

Ghost text completions appear as you type, powered by your configured AI provider. Accept with Tab, cycle through alternatives, or dismiss. Decorations highlight AI-suggested code with a subtle indicator.

src/components/Settings.tsx

Pin files for instant access

Navigate, pin, and act without leaving the editor

Breadcrumb Bar with Pin and Actions

A contextual breadcrumb shows your current file path, symbol hierarchy, and quick actions. Pin frequently used files for instant access. The editor mini action bar gives you format, refactor, and AI commands in one click.

Every line is interactive

Line Gutter Actions

Click the gutter to set breakpoints, run individual test blocks, or view git blame inline. Each action is contextual. Test files show run buttons, traced files show coverage indicators.

color:

#C4956A

url:skulptor.ai/api

src:

Preview without leaving your code

Inline Widgets

Color values show a live swatch. URLs become clickable previews. Image paths render thumbnails. CSS properties show computed previews. All inline, all non-intrusive, all interactive.

Peek Definition

function useMetrics(): Metrics {

Sticky: class Dashboard

Context always visible

Peek Definition and Sticky Scroll

Peek into any definition without opening a new tab. Sticky scroll headers keep the current function or class name visible as you scroll through long files. Never lose your place.

The Full Editor Experience

Split views, minimap navigation, integrated terminal, and multi-tab workflows. Everything arranged exactly how you want it.

Split Views

Horizontal and vertical splits. Compare files, reference docs, or watch output side-by-side.

Minimap

A zoomed-out view of your file. Click to jump. Highlights show search results, changes, and errors.

Integrated Terminal

Full terminal embedded in the editor. Multiple sessions, split terminals, and shell integration.

Multi-tab Workflow

Tab groups, pinned tabs, tab previews on hover, and keyboard shortcuts for rapid navigation.

skulptor editor

src/components/Dashboard.tsx

export function Dashboard() {

const [data, setData] = useState(null);

// fetching user metrics...

const metrics = useMetrics();

return (

<MetricsCard data={metrics.revenue} />Tab to accept

</div>

);

}