frontend · lit, web components, typescript, widgets
Lit developer for web components and widgets that run on any website.
A restaurant pastes one script tag and one HTML element into its website, and a complete reservation flow appears, whatever the site was built with. I built that widget with Lit, and a booking button for the insurance partners of a major auto-glass franchise. I can build yours the same way: small, sealed off from the page around it, and embeddable anywhere.
- Stack
- Lit, TypeScript, Vite, Vitest
- Output
- Standard custom elements, one script tag
- In production
- A reservation widget, a partner booking button
- Engagement
- As a project, in your team or as advisory
- Working hours
- Mon–Fri 04:00–18:00 Buenos Aires 09:00–23:00 Berlin 03:00–17:00 New York
- Available from
- Q4 '26
Why Lit and not React, Angular or Vue
- A standard HTML element: a Lit component is a custom element the browser knows natively. It runs in plain HTML, in WordPress, and inside React, Angular or Vue apps, and the page never needs to know what it was built with.
- Styles that can’t collide: Shadow DOM keeps the widget’s CSS in and the page’s CSS out. The site’s theme can’t break the widget, and the widget can’t break the site. Colors and fonts are adjusted through CSS custom properties, which are made to cross that line.
- Small: Lit itself is about 5 KB compressed. A widget written in React, Angular or Vue brings its framework along, onto a page that may already load another one.
- Close to the platform: templates are plain JavaScript template literals, with no JSX compiler and no virtual DOM, and Lit only updates the parts that changed. The element API is a browser standard, not a framework version you have to keep up with.
In production: a reservation widget for restaurants
For a restaurant-tech provider, I built a reservation widget that restaurants embed on their own websites with one script tag and one element. A button opens a dialog that walks the guest through date, party size, service, time and contact details, including event tickets, deposits paid through Stripe, restaurants with several locations, and alternative times when the chosen one is taken. It speaks German (formal or informal, and the Swiss variant), English, Spanish, French and Italian, comes in three themes, and takes its colors from attributes or CSS custom properties.
The first download is about 22 KB compressed, Lit included. The flow itself and each language load only when they’re needed. The widget ships from a CDN: every release gets its own URL that never changes, and every pull request gets a preview link, posted on the pull request. Link previews on WhatsApp or Instagram never run JavaScript, so a small Node service on Dokploy renders a reservation page for each restaurant on the server, with the widget inside it.
In production: a booking button for insurance partners
For a major auto-glass franchise, I built a booking button that insurance partners put on their own websites. The partner fills it with the customer and vehicle details it already has. One click checks them, creates a booking draft and takes the customer to the booking site to finish, with those details already in. It’s one self-contained file of about 17 KB compressed, Lit included, styled entirely through CSS custom properties.
Lit next to the rest of the stack
I wouldn’t build a whole web app with Lit. For an app with routing, forms and a lot of state, I’d pick Angular. Lit is for the parts that have to live on pages you don’t control: widgets, embeds, and design systems shared by teams on different frameworks. A booking platform in Angular with a Lit button on partner websites is exactly that split.
How we can work together
- App development: a widget or a component library as a project, with a written scope, a demo every week, and the code belongs to you.
- Staff augmentation: I join your team to build or maintain your web components, part-time or full-time, from three months.
- Advisory: which framework fits your widget or design system, or a review of the one you have, by the hour or as a monthly retainer.
Questions
Lit or React for a widget?
React is a good choice inside your own app. On someone else's website, a React widget brings React along, possibly next to another version the site already loads, and its styles share the page with the site's CSS. A Lit widget is a standard HTML element: about 5 KB of library, its own sealed-off styles, and nothing to agree on with the page.
Angular and Vue can build web components too. Why Lit?
They can: Angular Elements and Vue's defineCustomElement wrap components as custom elements. But each widget then carries the framework's runtime with it. That's fine inside an app that already loads the framework, and heavy on a restaurant's homepage. Lit was made for exactly this job.
Why not plain web components without a library?
For a single button, that can be enough. Lit adds what you would otherwise write by hand: properties that re-render when they change, templates that only update what changed, and scoped styles. For a flow with several steps and state, those 5 KB cost less than writing the plumbing yourself.
Does it work in WordPress and other CMSs?
If you can paste a script tag and an HTML element, yes. For systems that only accept classic scripts, the reservation widget also ships as a single file without modules.
Can we use the widget in our own React or Angular app?
Yes. To React, Angular and Vue, a custom element is just another HTML tag: attributes and properties go in, events come out.
What does it cost?
Pricing is on request: a fixed price or time and materials for projects, by the hour or as a monthly retainer for advisory. You get a written quote within 48 hours.