Skip to content

RAML Viewer, Editor & Navigator

A complete VS Code extension for RAML (RESTful API Modeling Language) development.

Features

RAML Editor

Syntax Highlighting — TextMate grammar for RAML 1.0 and 0.8
Language Server — Real-time validation, autocomplete, hover info, go-to-definition, document/workspace symbols
Snippets — Quick scaffolds for APIs, resources, methods, types, traits

RAML Navigator

Sidebar tree view showing your API structure:

Resources with nested sub-resources
HTTP methods (GET, POST, PUT, PATCH, DELETE)
Data Types
Traits
Resource Types
Examples

Click any node to jump to its definition. Right-click for context menu actions.

RAML Viewer

React-based webview with:

Two-pane layout — Resource tree on the left, method details on the right
Tabbed method preview — Details, Schema, Example tabs
VS Code theme integration — Supports dark and light themes
Live updates as you edit your RAML files

Commands

Command	Description
`RAML: Open Viewer`	Open the RAML Viewer panel
`RAML: Refresh Navigator`	Refresh the navigator tree
`RAML: Go to Definition`	Jump to the definition of a type, trait, or include
`RAML: Add Resource`	Generate a new resource scaffold
`RAML: Add Method`	Generate a new HTTP method scaffold

Supported RAML Features

RAML 1.0 and 0.8
Includes (!include)
Traits
Resource Types
Data Types
Examples

Validation Rules

The language server detects:

YAML syntax errors
Missing or invalid includes
Duplicate resources
Duplicate methods
Missing responses
Invalid trait/resource type references
Type reference errors

Development

Prerequisites

Node.js 18+
npm

Build

# Install dependencies
npm install
cd client/webview-react && npm install && cd ../..

# Build extension and webview
npm run build

Run

Open this project in VS Code
Press F5 to launch the Extension Development Host
Open any .raml file

Technology Stack

TypeScript
React 18 (functional components)
Vite (webview bundler)
esbuild (extension bundler)
vscode-languageserver / vscode-languageclient
raml-1-parser