Local First Development
Build the way front end developers should, local first.
Local First Development
Build the way front end developers should, local first.
Slot Placeholders
Pre-fill <slot />
elements during development.
API Editor
Configure your @api
properties and test locally using argTypes
.
Mock Anything
Apex methods, AppExchange Packages or any On-Platform imports.
Install LWC Garden:
pnpm add @lwc-garden/core tsx
npm install @lwc-garden/core tsx
yarn add @lwc-garden/core 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 yourlwr.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}}]}
Run the local dev server
npx @lwc-garden/core dev