Quick Edit (Cmd+K)

​

How It Works

​

Example Workflows

const data = await fetch('/api/users').then(res => res.json());

try {
  const data = await fetch('/api/users').then(res => res.json());
} catch (error) {
  console.error('Failed to fetch users:', error);
  throw error;
}

function getUsers() {
  return fetch('/api/users').then(function(res) {
    return res.json();
  });
}

const getUsers = async () => {
  const res = await fetch('/api/users');
  return res.json();
};

function calculateTotal(items) {
  return items.reduce((sum, item) => sum + item.price, 0);
}

interface Item {
  price: number;
}

function calculateTotal(items: Item[]): number {
  return items.reduce((sum, item) => sum + item.price, 0);
}

const doubled = [];
for (let i = 0; i < numbers.length; i++) {
  doubled.push(numbers[i] * 2);
}

const doubled = numbers.map(n => n * 2);

​

Documentation-Aware Editing

​

Example: Using External Docs

const button = document.createElement('button');
button.textContent = 'Click me';

import { useState } from 'react';

function Button() {
  return <button>Click me</button>;
}

​

Supported URL Patterns

• Documentation sites (e.g., https://nextjs.org/docs/app/api-reference)
• API references (e.g., https://docs.anthropic.com/en/api/messages)
• GitHub READMEs (e.g., https://github.com/user/repo#readme)
• Blog posts with code examples

​

Advanced Use Cases

​

Code Translation

// Select Python code, then:
"convert to JavaScript"

// Select class component, then:
"convert to functional component with hooks"

// Select REST endpoint, then:
"convert to GraphQL resolver"

​

Code Enhancement

"add input validation"
"add JSDoc comments"
"make this more readable"
"add logging statements"
"extract to separate function"

​

Style Changes

"use single quotes instead of double quotes"
"add semicolons"
"remove console.logs"
"format using prettier style"

​

Context Provided to AI

1. Selected code - The exact text you highlighted
2. Full file context - The entire file for understanding surrounding code
3. Your instruction - The natural language edit request
4. Scraped documentation (if URLs present) - Markdown content from referenced URLs

​

UI Components

• Text input - Enter your editing instruction
• Submit button - Apply the transformation
• Cancel button - Dismiss without changes

​

Tooltip Behavior

• Auto-focuses the input when opened
• Appears only when code is selected
• Automatically dismisses after successful edit
• Can be cancelled at any time

​

Keyboard Shortcuts

​

Implementation Details

• StateField - Tracks whether Quick Edit is active
• StateEffect - Triggers tooltip visibility
• Tooltip API - Renders the inline editing form
• Keymap - Binds Cmd+K to open the editor

​

Configuration

​

Error Handling

​

Tips for Best Results

1. Be specific - “add null checks” is better than “improve this”
2. Select meaningful chunks - Select complete statements or logical blocks
3. Preserve indentation - The AI maintains your original indentation level
4. Include URLs - Reference docs directly in your instruction for framework-specific changes
5. Iterate quickly - If the result isn’t perfect, select and edit again with refined instructions

​

Comparison with Other Features

​

Related Features

• Ghost Text Suggestions - AI completions while typing
• Conversations - Full project AI assistant
• Documentation Scraping - Teach the AI with external docs