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 tsx
  2. Create a garden.config.ts file

    import { GardenConfig } from '@lwc-garden/core/types'
    import lwrConfig from './lwr.config.json' with { type: 'json' }
    export default {
    // lwc.config.json modules type
    modules: [...lwrConfig.lwc.modules],
    } satisfies GardenConfig

    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