Fast and Efficient LWC Development

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

Get started View on Github

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

On Platform or Open Source

Works with on-platform folder structures or standard open source folder structures.

Learn more

Local Module Resolution

Dynamically resolve Static Resources, Custom Labels and lightning/* imports.

Learn more

Get Started

Install LWC Garden:

pnpm add @lwc-garden/core tsx

Optionally with @lwc-garden/utils

pnpm add @lwc-garden/core @lwc-garden/utils tsx

npm install @lwc-garden/core tsx

Optionally with @lwc-garden/utils

npm install @lwc-garden/core @lwc-garden/utils tsx

yarn add @lwc-garden/core tsx

Optionally with @lwc-garden/utils

yarn add @lwc-garden/core @lwc-garden/utils tsx

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:

{
  "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
      }
    }
  ]
}

Run the local dev server
Terminal window
```
npx @lwc-garden/core dev
```