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)
