Skip to main content
This guide will help you open your first project, navigate the interface, and start coding with Blink’s powerful features. By the end, you’ll be editing files, using the terminal, and leveraging keyboard shortcuts like a pro.
Blink is designed for speed and efficiency. Every feature is built to eliminate latency and keep you in the flow.

​
Opening Your First Project

1

Launch Blink

Start Blink from your applications menu or desktop shortcut.On first launch, you’ll see the onboarding screens. Review the introduction and click through to reach the main editor.
2

Open a Folder

Blink works with folder-based projects. To open a folder:Method 1: Keyboard Shortcut
  • Press Ctrl+O (Windows/Linux)
  • Select your project folder in the dialog
Method 2: Welcome Screen
  • Click “Open Folder” from the editor welcome screen
  • Browse to your project directory
The file explorer on the left will populate with your project structure.
3

Start Editing

Click any file in the explorer to open it in the editor. The file content appears in the main editing area with:
  • Syntax highlighting
  • Line numbers
  • Code error detection
  • Auto-save on Ctrl+S
Blink remembers your last opened folder. When you relaunch, it automatically loads your most recent project.

​
Understanding the Interface

Blink’s interface is divided into several key areas: 
┌────────────────────────────────────────────────┐
│ Navbar (File, Edit, Help, Update)             │
├──────┬─────────────────────────────────────────┤
│      │ Editor Tabs                             │
│ File ├─────────────────────────────────────────┤
│ Ex-  │                                         │
│ plor │ Main Editor Area                        │
│ er   │ (Monaco Editor)                         │
│      │                                         │
├──────┴─────────────────────────────────────────┤
│ Bottom Bar (Cursor, Errors, Warnings)         │
├───────────────────────────────────────────────┤
│ Problems/Terminal Panel (toggleable)          │
└───────────────────────────────────────────────┘
The top navbar provides access to core functions:
  • Press ALT to reveal navigation links and the update button
  • Access settings from the “Edit” menu
  • Check for updates when available

​
File Explorer (Left Sidebar)

The file explorer displays your project structure in a tree view:
  • Click files to open them
  • Click folders to expand/collapse
  • Right-click for context menu (copy, paste, rename, delete)
  • Drag and drop files and folders to reorganize
  • Icons indicate file types (JavaScript, TypeScript, images, etc.)
File Explorer Features:
  • Resizable width (drag the right edge)
  • Keyboard navigation support
  • Visual indicators for selected items
  • Supports nested folder structures

​
Editor Area

The main editor uses Monaco Editor (the same engine that powers VS Code) for a familiar editing experience:
  • Tabs: Multiple files open in tabs at the top
  • Syntax Highlighting: Automatic language detection
  • Error Detection: Red squiggles for errors, yellow for warnings
  • Line Numbers: Always visible on the left
  • Minimap: Optional code overview on the right (configurable in settings)
Editor Customization: Access settings via the navbar “Edit” menu to configure:
  • Font size and family
  • Cursor style (line, block, underline)
  • Minimap visibility
  • Line numbers style

​
Bottom Bar

The status bar at the bottom shows:
  • Cursor Position: Current line and column
  • Error Count: Total errors in the current file (red)
  • Warning Count: Total warnings (yellow)
Click the error/warning count to open the Problems panel.

​
Problems and Terminal Panel

Toggle this panel with `Ctrl+“ (backtick). It contains two tabs: Problems Tab:
  • Lists all errors and warnings in your files
  • Shows file path, line number, and error message
  • Click any problem to jump to that location in the editor
  • Severity indicated by color and icon
Terminal Tab:
  • Built-in terminal integrated into Blink
  • Automatically sets current directory to your project folder
  • Full xterm.js implementation with ANSI color support
  • Resize panel height by dragging the top edge

​
Essential Keyboard Shortcuts

Blink is optimized for keyboard-driven workflows. Master these shortcuts to maximize productivity:

​
File Operations

Ctrl+O          Open folder
Ctrl+S          Save current file
Ctrl+N          Create new file
Ctrl+Shift+N    Create new folder

​
Editing

Ctrl+Z          Undo
Ctrl+Y          Redo
Ctrl+C          Copy
Ctrl+V          Paste
Ctrl+X          Cut
Ctrl+F          Find in file
Ctrl+H          Find and replace

​
View and Navigation

Ctrl+`          Toggle terminal/problems panel
ALT             Show navbar menu
Click status    Toggle problems panel

​
Context Menu Actions

Right-click any file or folder in the explorer to:
  • Copy: Copy to clipboard
  • Cut: Cut for moving
  • Paste: Paste from clipboard
  • Rename: Rename the item (opens modal)
  • Delete: Permanently delete (use with caution)

​
Working with Files

​
Creating Files and Folders

1

Using Keyboard Shortcuts

  • Press Ctrl+N to create a new file
  • Press Ctrl+Shift+N to create a new folder
  • A modal appears prompting for the name
  • Type the name and press Enter
2

Using Explorer Buttons

  • Click the “New File” icon (📄) in the explorer header
  • Click the “New Folder” icon (📁) in the explorer header
  • Enter the name in the modal
3

Location

New items are created in:
  • The currently selected folder (if a folder is selected)
  • The parent folder (if a file is selected)
  • The project root (if nothing is selected)

​
Saving Files

Blink tracks file modifications:
  • Modified files show a dot indicator on their tab
  • Press Ctrl+S to save the current file
  • The dot disappears when the file is saved
  • Unsaved changes are preserved if you switch tabs
Blink does not auto-save. Always press Ctrl+S to persist your changes.

​
Opening Multiple Files

Blink supports multiple open files in tabs:
  1. Click files in the explorer to open them
  2. Each file opens in a new tab
  3. Click tabs to switch between files
  4. Close tabs by clicking the X or middle-clicking
  5. The active tab is highlighted
Image Files: Blink includes an image preview feature:
  • PNG, JPG, JPEG, GIF, SVG, and ICO files open in preview mode
  • The image is displayed at actual size
  • No editing is available for images

​
Using the Terminal

Blink’s integrated terminal provides full command-line access:
1

Open Terminal

Press `Ctrl+“ (Control + backtick) to toggle the terminal panel.If the panel was showing problems, it switches to the terminal tab.
2

Run Commands

The terminal automatically sets the working directory to your project folder.Example workflows:
# Install dependencies
npm install

# Start development server
npm run dev

# Run tests
npm test

# Git operations
git status
git add .
git commit -m "Update"
3

Resize Panel

Drag the top edge of the terminal panel to adjust its height.Blink remembers your preferred size.
The terminal uses node-pty for true terminal emulation. It supports ANSI colors and most terminal programs, but complex TUI applications may have issues.

​
Handling Errors and Warnings

Blink automatically detects errors and warnings in your code:

​
In the Editor

  • Red squiggly lines: Syntax errors or critical issues
  • Yellow squiggly lines: Warnings or style issues
  • Hover over marked code to see the error message

​
In the Bottom Bar

  • Error count (red) shows total errors
  • Warning count (yellow) shows total warnings
  • Click the count to open the Problems panel

​
In the Problems Panel

  1. Press `Ctrl+“ or click the error count
  2. Switch to the “Problems” tab if needed
  3. The panel lists all issues with:
    • Severity icon (⚠️ warning, ❌ error)
    • File path
    • Line and column number
    • Error message
  4. Click any issue to jump directly to that line in the editor

​
Customizing Your Editor

Access settings to personalize Blink:
1

Open Settings

  • Press ALT to show the navbar
  • Click “Edit” → “Settings”
  • The settings panel opens
2

Configure Options

Available settings:Font Settings:
  • Font size (10-30px)
  • Font family (monospace fonts)
Editor Settings:
  • Line numbers (on/off/relative/interval)
  • Word wrap (on/off)
  • Tab size (2/4/8 spaces)
Cursor Settings:
  • Style (line/block/underline)
  • Blink rate
Minimap:
  • Show/hide code minimap
  • Minimap side (left/right)
3

Save Settings

Settings are automatically saved when changed.They persist across restarts and are stored in:
  • Windows: %APPDATA%\Blink
  • Linux: ~/.config/Blink

​
Drag and Drop

Blink supports drag and drop for file organization:
  • Click and hold a file or folder in the explorer
  • Drag it over a folder (the folder highlights)
  • Release to move the item into that folder
  • The explorer updates automatically
Drag and drop performs a move operation (not copy). The item is relocated to the target folder.

​
Session Persistence

Blink remembers your workspace:
  • Last opened folder: Automatically reopens on launch
  • Settings: Persist across sessions
  • Window size and position: Saved and restored
  • Changelog view: Only shown once per version
To clear session history:
  1. Close Blink
  2. Delete the configuration directory
  3. Relaunch to start fresh

​
Example Workflow

Here’s a typical workflow for working on a web project:
1

Open Project

Press Ctrl+O and select your project folder (e.g., my-web-app).
2

Browse Files

In the file explorer, navigate to src/index.js and click to open it.
3

Edit Code

Make changes to the file. Notice the tab shows a dot indicating unsaved changes.If there are syntax errors, you’ll see red squiggles and the error count updates in the bottom bar.
4

Check Problems

Click the error count or press `Ctrl+“ to open the Problems panel.Review errors and click one to jump to the problematic line.
5

Fix and Save

Correct the error and press Ctrl+S to save.The error count updates and the tab indicator clears.
6

Run Development Server

Press `Ctrl+“ to switch to the terminal tab.Run npm run dev to start your dev server.The terminal shows server output with full color support.
7

Create New Component

Press Ctrl+N, name the file Button.js, and start coding.Blink’s syntax highlighting helps you write clean code quickly.

​
Tips for Maximum Productivity

Master Keyboard Shortcuts

Memorize Ctrl+O, Ctrl+S, Ctrl+N, and `Ctrl+“ to avoid reaching for the mouse.

Use the Problems Panel

Don’t wait for runtime errors. Check the Problems panel regularly to catch issues early.

Resize Panels

Adjust the file explorer and terminal panel sizes to match your workflow.

Right-Click Everything

The context menu provides quick access to file operations without memorizing shortcuts.

​
What’s Next?

Now that you’re familiar with Blink’s core features, explore:
  • Settings: Customize the editor to match your preferences
  • Terminal Integration: Use built-in terminal for Git, npm, and other CLI tools
  • File Management: Organize projects with drag-and-drop and context menus
  • Keyboard Shortcuts: Speed up your workflow with powerful key bindings
Blink is under active development. Check for updates regularly by pressing ALT and looking for the update button in the navbar.
Found a bug or have a feature request? Visit the Blink GitHub repository to contribute or report issues.

​
Getting Help

  • Documentation: Browse these docs for detailed guides
  • GitHub Issues: Report bugs or request features
  • Community: Join discussions on GitHub
  • License: Blink is open source under the MIT License
Happy coding with Blink! 🚀

Build docs developers (and LLMs) love

Get started for freeTalk to us