VS Code Express API Generator Endpoints

Generate complete frontend projects, CRUD boilerplates, reusable HTML components, listener modules and HTML ID based folders directly from Visual Studio Code.

VS Code Extension HTML JavaScript CRUD Generator Boilerplate

✨ Features 🚀 FrontEnd

📁 Generate Frontend Boilerplate

Quickly create complete frontend project structures with a single command.

🧩 Generate Reusable HTML Components

Create modular and reusable HTML components for faster UI development.

🎯 Generate HTML ID Based Modules

Automatically generate JavaScript modules from selected HTML element IDs.

⚡ VS Code Title Bar Integration

Access all generation commands directly from the VS Code Title Bar.

🎨 HTML-Based UI

Interactive HTML interface for configuring and generating project files.

💻 Beginner Friendly

Simple workflow designed for developers of all experience levels.

Frontend Generation

Step 1 — Initialize Project

Right click the Public folder and choose InitFromScript.

Public Folder ↓ InitFromScript ↓ HTML Page Opens

Step 2 — Create Project

Enter the project name. Example

bills

Select Schema (optional). Choose one of the following.

insertSimple

Creates a lightweight frontend project.

insertCrud

Creates a complete CRUD frontend boilerplate.

Generated Folder Structures

insertSimple

Public │ └── bills ├── css ├── Index ├── script.js └── index.html

insertCrud

Public │ └── bills ├── css ├── Common ├── CommonFuncs ├── Index ├── headers.json ├── buildHeader.js ├── index.html ├── script.js └── start.js

Backend Integration (Listener Generation)

Open

Public/bills/Index/FormLoad/DomContentLoaded/AddListeners/addListeners.js

The VS Code Title Bar displays two commands.

addHeaderItem

Creates reusable listener modules such as showAllHtmlId crudHtmlId verticalHtmlId

addHtmlId

Scans your HTML page and creates folders for every selected HTML ID.

Generated HTML ID Module

Username │ ├── clickFunc.js └── start.js

Password │ ├── clickFunc.js └── start.js

Example Project Structure

Public │ └── bills │ ├── css ├── Common ├── CommonFuncs ├── header │ ├── clickFunc.js │ └── start.js │ ├── Username │ ├── clickFunc.js │ └── start.js │ ├── Password │ ├── clickFunc.js │ └── start.js │ ├── Index │ └── FormLoad │ └── DomContentLoaded │ └── AddListeners │ ├── showAllHtmlId │ ├── crudHtmlId │ └── verticalHtmlId │ ├── script.js ├── index.html └── start.js

Generated Files

clickFunc.js

Handles UI events and button click logic.

start.js

Initializes generated HTML modules.

Benefits

Fast Development

Reduce repetitive coding.

Reusable Modules

Generate HTML listeners automatically.

Clean Architecture

Maintain standard folder structures.

Commands

Command	Description
InitFromScript	Generate frontend project from Public folder
insertSimple	Create simple frontend boilerplate
insertCrud	Create CRUD frontend boilerplate
addHeaderItem	Create reusable listener modules
addHtmlId	Create HTML ID based folders

Technologies Used

HTML5

CSS3

JavaScript

Node.js

VS Code Extension API

Installation

Extensions ↓ Search VS Code Frontend Boilerplate Generator

Support

GitHub

https://github.com/keshavsoft

VS Code Marketplace

https://marketplace.visualstudio.com/