Fast and Efficient LWC Development

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:

   pnpm

   pnpm add @lwc-garden/core tsx

   npm

   npm install @lwc-garden/core tsx

   yarn

   yarn 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

   npx @lwc-garden/core dev

LWC Garden is free and open-source software.

Made by luke