A powerful, extensible language service framework for building IDE features and language servers. Volar.js provides a modular architecture for creating language support with features like IntelliSense, diagnostics, formatting, and more.

• Getting Started
• Installation
• Architecture Overview
• Packages
• Documentation
• Contributing
• Troubleshooting

Volar.js is a monorepo containing multiple packages that work together to provide language service capabilities. The core packages form a layered architecture:

1. @volar/language-core - Core language processing (virtual code, mappings)
2. @volar/language-service - Language service features (IntelliSense, diagnostics, etc.)
3. @volar/language-server - LSP server implementation
4. Integration packages - VS Code, Monaco Editor, Node.js kit

import { createLanguage } from "@volar/language-core";
import { createLanguageService } from "@volar/language-service";
import { URI } from "vscode-uri";

// Create a language instance with plugins
const language = createLanguage(
  [
    /* your language plugins */
  ],
  new Map(),
  (id) => {
    /* sync function */
  }
);

// Create a language service
const languageService = createLanguageService(
  language,
  [
    /* your service plugins */
  ],
  { workspaceFolders: [URI.parse("file:///")] },
  {}
);

// Use the language service
const completions = await languageService.getCompletionItems(
  URI.parse("file:///example.ts"),
  { line: 0, character: 10 }
);

For more detailed examples, see the package documentation and examples directory.

• Node.js 22 or higher
• pnpm 9.4.0 or higher

# Clone the repository
git clone https://github.com/volarjs/volar.js.git
cd volar.js

# Install dependencies
pnpm install

# Build all packages
pnpm run build

# Run tests
pnpm run test

Install individual packages via npm:

npm install @volar/language-core
npm install @volar/language-service
npm install @volar/language-server
# ... etc

Volar.js follows a layered architecture where each layer builds upon the previous:

┌─────────────────────────────────────────────────────────┐
│              Editor Integration Layer                    │
│  @volar/vscode  │  @volar/monaco  │  @volar/kit        │
└─────────────────────────────────────────────────────────┘
                          │
┌─────────────────────────────────────────────────────────┐
│              Language Server Protocol Layer               │
│              @volar/language-server                      │
└─────────────────────────────────────────────────────────┘
                          │
┌─────────────────────────────────────────────────────────┐
│              Language Service Layer                      │
│              @volar/language-service                    │
│  (30+ language features: completion, hover, etc.)        │
└─────────────────────────────────────────────────────────┘
                          │
┌─────────────────────────────────────────────────────────┐
│              Core Language Processing Layer               │
│              @volar/language-core                       │
│  (VirtualCode, SourceScript, LanguagePlugin)            │
└─────────────────────────────────────────────────────────┘
                          │
┌─────────────────────────────────────────────────────────┐
│              Supporting Packages                         │
│  @volar/typescript  │  @volar/source-map  │  ...        │
└─────────────────────────────────────────────────────────┘

• VirtualCode: Generated code representations (e.g., TypeScript code generated from Vue templates)
• SourceScript: Original source files with their metadata
• LanguagePlugin: Transforms source files into VirtualCode
• LanguageServicePlugin: Provides language service features (completion, hover, etc.)
• Mapper: Maps between source and virtual code positions

For detailed architecture documentation, see docs/ARCHITECTURE.md.

@volar/language-core
  |
  |--- @volar/language-service
        |
        |--- @volar/language-server
        |     |
        |     |--- @volar/vscode (as a client to the language server)
        |
        |--- @volar/kit (encapsulates @volar/language-service for Node.js applications)
        |
        |--- @volar/monaco (integrates @volar/language-service into Monaco Editor)

The foundation of Volar.js. Provides core language processing functionalities including:

• Virtual code creation and management
• Source-to-virtual code mapping
• Language plugin system
• Script registry and synchronization

Documentation: packages/language-core/README.md

Builds on @volar/language-core to provide language service features:

• 30+ language features (completion, hover, diagnostics, formatting, etc.)
• Language service plugin system
• Feature worker pattern for efficient processing
• Embedded document URI handling

Documentation: packages/language-service/README.md

Implements a Language Server Protocol (LSP) server:

• LSP protocol handling
• Project management (TypeScript, Simple)
• File system providers (Node.js, HTTP)
• Server lifecycle management

Documentation: packages/language-server/README.md

VS Code extension client for LSP:

• LSP client implementation
• VS Code API integration
• Configuration management
• Client-server communication

Documentation: packages/vscode/README.md

Monaco Editor integration:

• Worker-based language service
• TypeScript support
• Auto Type Acquisition (ATA)
• Editor feature providers

Documentation: packages/monaco/README.md

Node.js application toolkit:

• Simplified API for linting and formatting
• Project creation utilities
• Service environment setup
• File watcher integration

Documentation: packages/kit/README.md

TypeScript integration utilities:

• TypeScript language plugin support
• Service script system
• Program decoration and proxying
• Protocol integration

Documentation: packages/typescript/README.md

Source mapping functionality:

• Position mapping between source and generated code
• Binary search utilities
• Mapping data structures

Documentation: packages/source-map/README.md

Testing utilities:

• Language server testing helpers
• Mock server creation
• Test document management

Documentation: packages/test-utils/README.md

ESLint integration:

• ESLint rule integration
• Diagnostic conversion

Documentation: packages/eslint/README.md

jsDelivr CDN integration:

• NPM package file system
• Auto Type Acquisition (ATA)
• CDN-based type resolution

Documentation: packages/jsdelivr/README.md

Comprehensive documentation is available in the docs/ directory:

• Architecture Guide - System architecture and design
• Data Flow - How data flows through the system
• Plugin System - Creating and using plugins
• API Reference - Complete API documentation
• Examples - Usage examples and guides
• LLM Documentation - Documentation optimized for LLM consumption
  • Types - Type definitions
  • Architecture - System architecture
  • Examples - Code examples
  • VirtualCode Guide - VirtualCode reference
  • Package Overviews - Package summaries

In-depth guides covering LanguagePlugin and VirtualCode:

• Language Plugin Complete Guide - Complete LanguagePlugin reference
• VirtualCode Complete Reference - Complete VirtualCode reference
• Mapping System Guide - Understanding mappings and CodeInformation
• Script Snapshot Guide - Working with IScriptSnapshot
• SourceScript and Language System - Script registry and lifecycle
• Advanced Patterns - Advanced plugin patterns
• Integration Guide - How components work together

Each package has its own README with detailed documentation:

• @volar/language-core
• @volar/language-service
• @volar/language-server
• @volar/vscode
• @volar/monaco
• @volar/kit
• @volar/typescript
• @volar/source-map
• @volar/test-utils
• @volar/eslint
• @volar/jsdelivr

We welcome contributions! Please see our Contributing Guide for details on:

• Development setup
• Code style guidelines
• Testing requirements
• Pull request process

# Install dependencies
pnpm install

# Build in watch mode
pnpm run watch

# Run tests
pnpm run test

# Format code
pnpm run format

# Lint code
pnpm run lint
pnpm run lint:fix

Build errors

• Ensure you're using Node.js 22+ and pnpm 9.4.0+
• Clear node_modules and reinstall: rm -rf node_modules && pnpm install
• Rebuild: pnpm run build

Type errors

• Run pnpm run build to generate type definitions
• Ensure all dependencies are installed

Test failures

• Check that all packages are built: pnpm run build
• Ensure test environment is set up correctly

LSP connection issues

• Check server logs for errors
• Verify workspace folder configuration
• Ensure file system providers are correctly configured

For more help, please open an issue.

This project is made possible thanks to our generous sponsors:

Special Sponsor
Next Generation Tooling
Platinum Sponsors
An approachable, performant and versatile framework for building web user interfaces.			Stay in the flow with instant dev experiences. No more hours stashing/pulling/installing locally — just click, and start coding.
Gold Sponsors
Silver Sponsors

Become a sponsor