Looba Snippet Library for VS Code

Browse, preview, and insert UI snippets from Looba — the community platform for HTML/CSS/JS, Tailwind, and React components — directly in VS Code.

Features

A dedicated Looba panel in the Activity Bar with three sections:

Library — Browse all community snippets with pagination, filterable by type (Vanilla, Tailwind, React) and sort order (recent, most viewed, most downloaded)
My Favorites — Your saved snippets (requires login)
Recent — Last 10 snippets you viewed

Search (`Ctrl+Shift+L` / `Cmd+Shift+L`)

Quick-search with type filters. Select a result to instantly preview it.

Snippet Preview

Live rendered preview in a sandboxed iframe
Tab between files (HTML, CSS, JS, TSX)
Insert at cursor — inserts the code at your cursor position
Copy — copies to clipboard
Open on Looba — opens the snippet page in your browser
Drag & drop — drag the snippet code directly into any editor tab

Smart Insert

Automatically picks the right file based on your active editor:

Editor language	Inserted file
`.tsx` / `.jsx`	`Snippet.tsx` (React)
`.html`	`index.html`
`.css`	`styles.css`
`.js`	`app.js`

If multiple files match, you'll be prompted to choose.

Authentication

Email/password login via a styled webview
Google & GitHub OAuth (opens browser)
Secure token storage (VS Code SecretStorage — never in plaintext)
Username displayed in the status bar

Commands

Command	Keybinding	Description
`Looba: Login`	—	Open login panel
`Looba: Logout`	—	Log out
`Looba: Search Snippets`	`Ctrl+Shift+L`	Search with filters
`Looba: Refresh Library`	—	Refresh all panels
`Looba: Open Post`	—	Open snippet preview
`Looba: Insert Snippet`	—	Insert code at cursor
`Looba: Copy Snippet`	—	Copy code to clipboard
`Looba: Toggle Favorite`	—	Add/remove from favorites

Drag & Drop

In the snippet preview panel, use the "Drag to editor" handle to drag the current file's code directly into any open editor tab. This works across split editors too.

Installation

From VSIX

code --install-extension looba-snippets-0.1.0.vsix

From Marketplace

Search for "Looba Snippet Library" in the Extensions panel (Ctrl+Shift+X).

Getting Started

Click the Looba icon in the Activity Bar
Browse the Library or use Ctrl+Shift+L to search
Click a snippet to preview it
Use Insert at cursor, Copy, or drag & drop to use the code
(Optional) Log in to save favorites

Publishing to VS Code Marketplace

Install vsce: npm install -g @vscode/vsce
Update publisher in package.json with your Publisher ID
Add a 128x128 PNG icon at media/looba-icon.png
Build: npm run compile
Package: vsce package
Publish: vsce publish

You'll need a Personal Access Token from Azure DevOps.

License

Proprietary (All rights reserved) — see LICENSE Snippets available through Looba remain the property of their respective authors. Use of each snippet is permitted under the license or usage terms provided for that snippet.

Looba Snippet Library

Looba