MongoDB Schema Visualizer

A VS Code extension that connects to your MongoDB database, samples your collections, and renders an interactive diagram of collections, fields, types, and likely relationships — right inside the editor.

Free tier: visualize up to 5 collections. Pro: unlimited collections, unlocked via a one-time Gumroad purchase (verified live against Gumroad's License Verification API — no backend needed).

1. Local setup (do this on your own machine, not in a sandbox)

cd mongo-schema-visualizer
npm install
npm run compile

Then open the folder in VS Code and press F5. This launches an "Extension Development Host" window with the extension loaded.

In that new window:

1. Open Command Palette (Cmd/Ctrl+Shift+P)
2. Run "MongoDB: Visualize Schema"
3. Paste a MongoDB connection string when prompted (or set it permanently via "MongoDB: Set Connection String", or put MONGODB_URI=... in a .env file in your test workspace root)
4. Pick a database if you have more than one
5. The diagram opens in a new panel

No MongoDB instance handy? Spin up a free MongoDB Atlas cluster (free tier, no card required for the free tier) to test against, or run mongod locally if you have it installed.

2. Before you publish — replace these placeholders

• package.json → "publisher": "YOUR_PUBLISHER_NAME" — your VS Code Marketplace publisher ID (create one free at https://marketplace.visualstudio.com/manage)
• src/license.ts → GUMROAD_PRODUCT_PERMALINK — set this after creating your Gumroad product (step 4 below)

Also recommended before publishing:

• Add a 128x128 icon.png in the root and reference it in package.json ("icon": "icon.png") — extensions with icons get noticeably more clicks
• Add 2-3 screenshots/GIFs to this README — the Marketplace renders this file as your listing page

3. Package and publish to the VS Code Marketplace

npm install -g @vscode/vsce
vsce login YOUR_PUBLISHER_NAME    # needs a Personal Access Token from
                                    # https://dev.azure.com (free)
vsce package                       # creates mongo-schema-visualizer-0.1.0.vsix
vsce publish                       # publishes it live

After publishing, your extension is searchable at marketplace.visualstudio.com and inside VS Code's Extensions tab within minutes — this is the "no marketing" distribution channel: people search "mongodb schema" or "mongo visualizer" and find you organically.

4. Set up the Pro tier on Gumroad (free, no backend)

1. Create an account at gumroad.com
2. Create a new product, e.g. "MongoDB Schema Visualizer — Pro", price it ($5-15 one-time is reasonable for a dev tool)
3. In the product's settings, enable "Generate a unique license key per sale"
4. Copy the product's permalink (the short slug in its URL) into GUMROAD_PRODUCT_PERMALINK in src/license.ts, recompile, and republish
5. When someone buys, they get a license key by email. They run "MongoDB Schema Visualizer: Activate Pro License" in VS Code, paste it in, and the extension calls Gumroad's API live to verify it — nothing for you to host or maintain

5. Realistic next steps after v1 is live

• Watch the Marketplace listing's install count and Q&A tab for feedback
• Add a relationship-detection improvement (currently a name-based heuristic — could use $lookup-style detection from real aggregation pipelines in the future)
• Consider a "export diagram as PNG/SVG" feature as a Pro perk
• Cross-post the launch once on r/mongodb, r/vscode, and Indie Hackers — optional, but a single launch post costs little time and can spike installs

Project structure

src/
  extension.ts        - activation, command wiring, MongoDB connection flow
  schemaInference.ts   - samples docs, infers field names/types/relationships
  webviewPanel.ts       - renders the interactive diagram (vis-network)
  license.ts            - Gumroad license verification + free tier limit
package.json            - extension manifest (commands, config, metadata)