---
permalink: 'developing/code-examples.html'
title: Code examples
section: guides
tags:
  - guides
  - guide
---

# Code examples

## lit-html and lit-element

A simple base class for creating fast, lightweight web components.
[LitElement documentation](https://lit-element.polymer-project.org)
[lit-html documentation](https://lit-html.polymer-project.org)

Click on the links below to view live code samples:

- [Basic](https://webcomponents.dev/org/open-wc?collection=demos-lit-1-basic)

  - [01 Basic setup](https://webcomponents.dev/edit/collection/hzgpcWmPGvSJXSo4fs2a/p0QzvD0iyAsOxt4Iug7U?sv=1&pm=1)
  - [02 Manage properties](https://webcomponents.dev/edit/collection/hzgpcWmPGvSJXSo4fs2a/c4Lm2o2EeQs4INPXH2pr?sv=1&pm=1)
  - [03 Property changes](https://webcomponents.dev/edit/collection/hzgpcWmPGvSJXSo4fs2a/RbvMbT0ADah7NCH6KUWj?sv=1&pm=1)
  - [04 Properties and attributes](https://webcomponents.dev/edit/collection/hzgpcWmPGvSJXSo4fs2a/N8FIYJqbKAzhzEQaobxE?sv=1&pm=1)
  - [05 Passing properties](https://webcomponents.dev/edit/collection/hzgpcWmPGvSJXSo4fs2a/KY1Ce9j1ahUj4jSWQOKI?sv=1&pm=1)
  - [06 Handle events](https://webcomponents.dev/edit/collection/hzgpcWmPGvSJXSo4fs2a/M3OUIoHe9XAgfUa7hCkd?sv=1&pm=1)
  - [07 Conditional rendering](https://webcomponents.dev/edit/collection/hzgpcWmPGvSJXSo4fs2a/QIoIigpr7Gb3Mbnw5fkY?sv=1&pm=1)
  - [08 Repeated templates](https://webcomponents.dev/edit/collection/hzgpcWmPGvSJXSo4fs2a/HJeKgSrF5bTk8rp3j4XS?sv=1&pm=1)
  - [09 Update arrays and objects](https://webcomponents.dev/edit/collection/hzgpcWmPGvSJXSo4fs2a/NTxVrdFBB3DB8wr5QnpZ?sv=1&pm=1)
  - [10 Render styles](https://webcomponents.dev/edit/collection/hzgpcWmPGvSJXSo4fs2a/yXTfhyZLao89tVFiuxEI?sv=1&pm=1)
  - [11 Fetching data](https://webcomponents.dev/edit/collection/hzgpcWmPGvSJXSo4fs2a/nJNnHZjHdwole3DrvQEV?sv=1&pm=1)
  - [12 Firing events](https://webcomponents.dev/edit/collection/hzgpcWmPGvSJXSo4fs2a/wSRqSHx2s2WEFL8t8vxI?sv=1&pm=1)

- [Intermediate](https://webcomponents.dev/org/open-wc?collection=demos-lit-2-intermediate)

  - [01 First updated](https://webcomponents.dev/edit/collection/fOta0aCFgRQqMtyXJjXT/EYLh9pUNZKOE3sXZpEZ3?sv=1&pm=1)
  - [02 Updated](https://webcomponents.dev/edit/collection/fOta0aCFgRQqMtyXJjXT/6UaPjWeebc3oYBYFC2lB?sv=1&pm=1)
  - [03 Lifecycle](https://webcomponents.dev/edit/collection/fOta0aCFgRQqMtyXJjXT/KdErFoto9wNGk9jGrago?sv=1&pm=1)
  - [04 Computed properties](https://webcomponents.dev/edit/collection/fOta0aCFgRQqMtyXJjXT/ID6lan25bbg3b6tm1nIg?sv=1&pm=1)
  - [05 Querying dom](https://webcomponents.dev/edit/collection/fOta0aCFgRQqMtyXJjXT/p5GRJeY6xi9FtrFpkdzI?sv=1&pm=1)
  - [06 Light dom](https://webcomponents.dev/edit/collection/fOta0aCFgRQqMtyXJjXT/jxnEO12QUdPlcMrlu7C8?sv=1&pm=1)
  - [07 Reflecting attributes](https://webcomponents.dev/edit/collection/fOta0aCFgRQqMtyXJjXT/gDELkFM9gcjtbwRPUmNQ?sv=1&pm=1)
  - [08 Dynamic repeated templates](https://webcomponents.dev/edit/collection/fOta0aCFgRQqMtyXJjXT/5BGDAOl4VPMzZBNFrg9f?sv=1&pm=1)
  - [09 Slotting](https://webcomponents.dev/edit/collection/fOta0aCFgRQqMtyXJjXT/pNsN9JVAiNHOAHpvkL6c?sv=1&pm=1)

- [Advanced](https://webcomponents.dev/org/open-wc?collection=demos-lit-3-advanced)

  - [01 Property setter observer](https://webcomponents.dev/edit/collection/AidiKxSw38KSM132so9W/9EaxZ6R6Zi1LU28xcCBy?sv=1&pm=1)
  - [02 Until directive](https://webcomponents.dev/edit/collection/AidiKxSw38KSM132so9W/OpV1NiPgNsLay2bkjX3N?sv=1&pm=1)
  - [03 Template wrapping](https://webcomponents.dev/edit/collection/AidiKxSw38KSM132so9W/5HTnpTTQh6S5GWbAqzio?sv=1&pm=1)
  - [04 Shared templates](https://webcomponents.dev/edit/collection/AidiKxSw38KSM132so9W/IAxYV6YOZY7XDpiJfXUH?sv=1&pm=1)
  - [05 Shared styles](https://webcomponents.dev/edit/collection/AidiKxSw38KSM132so9W/6K8FjFV6ZsLm53e14WMZ?sv=1&pm=1)
  - [06 External template](https://webcomponents.dev/edit/collection/AidiKxSw38KSM132so9W/0VkunzfnWvE5CTIncWJf?sv=1&pm=1)
  - [07 Template factories](https://webcomponents.dev/edit/collection/AidiKxSw38KSM132so9W/bmxMTzhNiUTxlYNn6LDZ?sv=1&pm=1)
  - [08 Should update](https://webcomponents.dev/edit/collection/AidiKxSw38KSM132so9W/62bf7hT2eyv4c9gwQQJ2?sv=1&pm=1)

## Haunted

React's Hooks API implemented for web components 👻
[Haunted documentation](https://github.com/matthewp/haunted)

Click on the links below to view live code samples:

- [Basic](https://webcomponents.dev/org/open-wc?collection=demos-haunted-1-basic)

  - [01 Basic setup](https://webcomponents.dev/edit/collection/d5hmXU6Oq1awvGniAMlo/ntaDvcXcKZIBMigMYFhG?sv=1&pm=1)
  - [02 Manage properties](https://webcomponents.dev/edit/collection/d5hmXU6Oq1awvGniAMlo/K0zkBtuRSaBhsKjBWw4T?sv=1&pm=1)
  - [03 Property changes](https://webcomponents.dev/edit/collection/d5hmXU6Oq1awvGniAMlo/9k0f2Ov4xAkwY3AdIyp4?sv=1&pm=1)
  - [04 Handling attributes](https://webcomponents.dev/edit/collection/d5hmXU6Oq1awvGniAMlo/D0lic4qM2r0x0vf9XmeM?sv=1&pm=1)
  - [05 Passing properties](https://webcomponents.dev/edit/collection/d5hmXU6Oq1awvGniAMlo/MbJyuTWIZ89FoQCi2nBs?sv=1&pm=1)
  - [06 Handle events](https://webcomponents.dev/edit/collection/d5hmXU6Oq1awvGniAMlo/ln86mScjlvuC26RdgOO0?sv=1&pm=1)
  - [07 Conditional rendering](https://webcomponents.dev/edit/collection/d5hmXU6Oq1awvGniAMlo/MOFhPCewTaq59t1Sicno?sv=1&pm=1)
  - [08 Repeated templates](https://webcomponents.dev/edit/collection/d5hmXU6Oq1awvGniAMlo/wHcZc3KklmlQpWkZwM87?sv=1&pm=1)
  - [09 Firing events](https://webcomponents.dev/edit/collection/d5hmXU6Oq1awvGniAMlo/6G7v2HzTo9WrKVsDJiY3?sv=1&pm=1)
  - [10 Virtual Components](https://webcomponents.dev/edit/collection/d5hmXU6Oq1awvGniAMlo/6G7v2HzTo9WrKVsDJiY3?sv=1&pm=1)
  - [11 Using styles](https://webcomponents.dev/edit/collection/d5hmXU6Oq1awvGniAMlo/wRNJ8t1sSU9V8nI60YRf?sv=1&pm=1)

- [Intermediate](https://webcomponents.dev/org/open-wc?collection=demos-haunted-2-intermediate)

  - [01 Using state](https://webcomponents.dev/edit/collection/zwB8yaJAbZfLRDz4D46o/KWmNJXyhezN643qRei7y?sv=1&pm=1)
  - [02 Using effects](https://webcomponents.dev/edit/collection/zwB8yaJAbZfLRDz4D46o/9rDYEbssqfYeoQ8wVMPR?sv=1&pm=1)
  - [03 Fetch data](https://webcomponents.dev/edit/collection/zwB8yaJAbZfLRDz4D46o/FPua6FVRwhZingSoxjiK?sv=1&pm=1)
  - [04 Using reducer](https://webcomponents.dev/edit/collection/zwB8yaJAbZfLRDz4D46o/ioQN4jxwcJ0ndx1fjhlO?sv=1&pm=1)
  - [05 Using ref](https://webcomponents.dev/edit/collection/zwB8yaJAbZfLRDz4D46o/FATaD7mpoXGqONdNQH21?sv=1&pm=1)
  - [06 Using memo](https://webcomponents.dev/edit/collection/zwB8yaJAbZfLRDz4D46o/dPDRsNHcvFDRfJBy1kNy?sv=1&pm=1)

- [Advanced](https://webcomponents.dev/org/open-wc?collection=demos-haunted-3-advanced)
  - [01 Using context](https://webcomponents.dev/edit/collection/pnCUyQWtMMqQs2klospo/AOCiUtoiTLSqvBTW0EuP?sv=1&pm=1)