Code Editor

Blueberry includes a powerful code editor with built-in language support, smart git awareness, and specialized viewers.

blueberry-app

srcpackage.json

page.tsx

globals.css

package.json

src/app/page.tsx

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

import { useState } from "react";

export default function App() {

const [count, setCount] = useState(0);

return (

<div className="container">

<h1>Hello World</h1>

<p>Count: {count}</p>

<button onClick={() => setCount(count + 1)}>

Increment

</button>

</div>

);

}

Multi-Language Syntax Highlighting

Blueberry supports 30+ programming languages out of the box:

Web Technologies: JavaScript, TypeScript, JSX/TSX, HTML, CSS, SCSS, Less, JSON, YAML, XML

Server Languages: Python, Go, Rust, Java, C#, C++, Ruby, PHP, Swift, Kotlin

Data & Config: SQL, GraphQL, Markdown, Shell, Dockerfile, TOML

Each language includes:

• Automatic language detection from file extension
• Syntax coloring with semantic token support
• Bracket matching and auto-closing
• Code folding for large files

Language Server Protocol (LSP)

Blueberry integrates with Language Server Protocol for intelligent code understanding:

Hover Information

• Type information for variables and functions
• Inline documentation from source
• Parameter hints

Go to Definition (Cmd+Click)

• Navigate to function/class definitions
• Automatically opens file in new tab
• Preserves editor scroll position

Supported Languages: JavaScript, TypeScript, Python, Go, Rust (with language server installed)

Real-Time Git Gutter

The editor’s left margin shows live git status:

Features:

• Hover over changed line for original content
• Uses LCS diff algorithm for precision
• Updates instantly as you edit

Side-by-Side Diff Viewer

View original vs. current file content in the Source Control panel:

• Line numbers with diff indicators
• Syntax coloring in both panes
• Scroll sync between panes
• Full-screen diff view for detailed review

Markdown Preview & Block Editor

README.md

page.tsx

README.md

PreviewMarkdown

Blueberry Starter

A Next.js starter template with Blueberry IDE support.

Getting Started

1.Clone this repository

2.Run npm install to install dependencies

3.Run npm run dev to start the dev server

Features

AI Integration: Claude Code works out of the box with Blueberry MCP

Live Preview: Changes reload automatically in the preview panel

Worktrees: Work on multiple branches simultaneously

Project Structure

src/

app/

page.tsx # Home page

layout.tsx # Root layout

components/

Button.tsx # UI components

lib/

utils.ts # Shared utilities

Scripts

npm run dev: Start development server

npm run build: Build for production

npm run lint: Run ESLint

TODO

Set up project structure

Add Tailwind CSS

Add authentication

Deploy to Vercel

When you open a .md or .mdx file, Blueberry offers a Notion-like block editor alongside the standard source view.

Preview Mode

Toggle between Preview and Markdown tabs in the toolbar:

• Preview renders the markdown as a rich document with styled headings, tables, code blocks, and links
• Markdown shows the raw source in the standard code editor
• Both editors stay mounted, so undo history is preserved when switching between views

Block Editing

In preview mode, the editor supports:

• Slash commands - Type / to insert headings, lists, code blocks, tables, and more
• Drag-and-drop blocks - Rearrange paragraphs, headings, and other blocks by dragging
• Inline formatting - Bold, italic, code, links with a floating toolbar
• Tables - Full-width tables with header backgrounds
• Code blocks - Syntax-highlighted with dark theme styling
• Links - Click links to open them in Blueberry’s preview panel

Changes in preview mode are merged back into the source markdown, preserving formatting that the block editor doesn’t handle.

Image Viewer

Open images directly in the editor:

Zoom Levels: 10%, 25%, 50%, 75%, 100%, 150%, 200%, 300%, 400%

Shortcuts:

• + Zoom in
• - Zoom out
• F Toggle fit mode

Supported formats: PNG, JPG, GIF, WebP, SVG

Editor Settings

Customize from Settings → General:

• Font size (8px - 20px, default: 14px)
• Font family
• Theme
• Word wrap toggle
• Minimap toggle

Keyboard Shortcuts