Skip to content

Fast and Efficient LWC Development

LWC development doesn't need to be slow and painful.
Build your Lightning Web Components locally.

Features

Local First Development

Build the way front end developers should, local first.

Get Started

Slot Placeholders

Pre-fill <slot /> elements during development.

Learn more

API Editor

Configure your @api properties and test locally using argTypes.

Learn more

Mock Anything

Apex methods, AppExchange Packages or any On-Platform imports.

Learn more

Get Started

  1. Install LWC Garden:

    Terminal window
    pnpm add @lwc-garden/core
  2. Create a garden.config.js file

    import lwrConfig from './lwr.config.json' assert { type: 'json' }
    /**
    * @type {import('@lwc-garden/core/types').GardenConfig}
    */
    const CONFIG = {
    // lwr.config.json modules type
    modules: [...lwrConfig.lwc.modules],
    }
    export default CONFIG

    Don’t forget to add the garden config to your lwr.config.json file:

    lwr.config.json
    {
    "lwc": {
    "modules": [
    {
    "dir": "./.garden/components",
    "namespace": "garden"
    },
    {
    "dir": "./force-app/main/default/lwc",
    "namespace": "c"
    }
    ]
    },
    "moduleProviders": [
    "@lwrjs/label-module-provider",
    "@lwrjs/app-service/moduleProvider",
    "@lukethacoder/lwrjs-lwc-module-provider",
    "@lwrjs/npm-module-provider"
    ],
    "routes": [
    {
    "id": "app",
    "path": "/",
    "rootComponent": "garden/app",
    "layoutTemplate": "./.garden/layouts/index.html",
    "bootstrap": {
    "syntheticShadow": true
    }
    }
    ]
    }
  3. Run the local dev server

    Terminal window
    npx @lwc-garden/core dev

LWC Garden is free and open-source software.

Made by luke