Servly VSCode Extension

Browse, preview, and insert Servly components directly from your IDE.

Features

• Component Browser: Browse all available components in a sidebar panel
• Live Preview: See component details, props, and code examples
• Smart Insertion: Insert components with proper imports and TypeScript types
• Multi-Framework: Support for React, Vue, Svelte, Angular, and Solid
• Offline Support: Cache components for offline access
• Authentication: Multiple auth methods (API key, OAuth, config file)

Installation

1. Install from VSCode Marketplace: Search for "Servly Components"
2. Or install from VSIX: code --install-extension servly-vscode-0.1.0.vsix

Authentication

The extension supports multiple authentication methods (in priority order):

1. Project Config (Recommended)

Add your API key to servly.config.json in your project root:

{
  "registry": {
    "apiKey": "sk_live_xxxxxxxxxxxxx"
  }
}

2. Environment Variable

export SERVLY_API_KEY=sk_live_xxxxxxxxxxxxx

3. VSCode Settings

Open Settings and search for "Servly API Key", or add to settings.json:

{
  "servly.apiKey": "sk_live_xxxxxxxxxxxxx"
}

4. OAuth Login

Click "Login to Servly" in the extension panel to authenticate via browser.

Usage

Browse Components

1. Click the Servly icon in the Activity Bar
2. Browse components by category or search
3. Click a component to see details

Insert a Component

1. Place cursor where you want to insert
2. Right-click a component → "Insert Component"
3. Or use Command Palette: Servly: Insert Component

View Component Details

Click any component in the browser to open the detail panel with:

• Props interface
• Code examples for all frameworks
• Usage instructions

Commands

Settings

Development

# Install dependencies
npm install

# Compile
npm run compile

# Watch mode
npm run watch

# Package extension
npm run package

Requirements

• VSCode 1.85.0 or higher
• Node.js 18+ (for development)

License

MIT