Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Decoupled StudioNew to Visual Studio Code? Get it now.
Decoupled Studio

Decoupled Studio

Decoupled Inc

|
596 installs
| (0) | Free
Decoupled Studio VSCode Extension
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Decoupled Studio - The JAMStack IDE

  • Decoupled Studio is a VSCode-based IDE for modern web apps that understands frameworks, infrastructure and services in depth.
  • It provides a better experience than individual extensions because it understands complete projects.
  • Issues on Github

Redwood.js Support

  • Redwood.js is a React + GraphQL + Prisma + JAMStack web framework with a strong focus on conventions and productivity.
  • Decoupled Studio provides deep support for Redwood.js and related technologies.

Getting Started

  • Open any Redwood project with VSCode. Decoupled Studio will look for a redwood.toml in the root. (Note: Only one Redwood.js project per workspace supported for now).

Redwood Outline / Explorer

  • Explore your project with a Redwood-aware outline. Convenient access to routes/pages, generators, dev server, live previews, and more!

Generators

  • Redwood provides Ruby-Style generators for every aspect of the framework via the redwood generate <type> <name> command (or rw g)
  • Decoupled Studio brings generators closer to the VSCode experience by augmenting them in a few ways:
    • Exposes generators via VSCode commands, code lenses, and other native affordances
    • Makes sure generated code plays nicely with open/unsaved editors and undo/redo
    • Enriches the generation logic with extra validations and information. For example, by listing the available Models in the schema.prisma file, or detecting duplicate routes, potential overwrites, etc.

For example:

  • Command: Redwood: Generate...

Semantic Validation for Routes.js

  • Syntactic and Semantic Validation for paths

Live Preview

  • TODO: Jump from code (ex: Routes file or Page components) to live previews.
  • TODO: HMR/Live editing with VSCode's internal browser (TODO) and an external browser
  • Page thumbnails :)

Full-Stack + Multi-Language Semantic Checks

  • Redwood.js relies extensively on conventions to eliminate boilerplate and APIs
  • Decoupled Studio understands and enforces some of these rules across layers and languages
  • For example: Linking GraphQL SDLs + JS Service Implementations

Commands

  • Redwood: Show Project Outline
    • Show Outline
  • Redwood: Generate...
    • $ redwood generate...
  • Redwood: Interactive CLI...
    • $ redwood ...
  • Redwood: Open Dev Server
    • Starts dev server and opens the default browser
    • $ redwood dev --open
  • Redwood: Open Dev Server on Current Page/Component
    • $ redwood dev --open=/about-us
  • Redwood: Open Storybook
    • $ redwood storybook --open
  • Redwood: Open Storybook on current Page/Component
    • $ redwood storybook --open=MyComponent
  • Redwood: Open GraphQL playground

Netlify Support

netlify.toml

  • Semantic and Syntactic Validation
  • TODO: Integration with Redwood.js workflows (Ex: moving a page and creating a redirect)

Netlify Dev

  • TODO: Explain
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft