In this article I will go over how to set up a Lit web component and use it to wrap the Monaco Editor that powers VSCode.

TLDR You can find the final source here and an online demo here.

To learn how to build an extension with VSCode and Lit check out the blog post here.

Prerequisites #

  • Vscode
  • Node >= 12
  • Typescript

Getting Started #

We can start off by navigating in terminal to the location of the project and run the following:

npm init @vitejs/app --template lit-element-ts

Then enter a project name lit-code-editor and now open the project in vscode and install the…


In this article I will go over how to set up a Lit web component and use it to create a VSCode extension.

TLDR You can find the final source here.

Prerequisites #

  • Vscode
  • Node >= 12
  • Typescript

Getting Started #

We can start off by navigating in terminal to the location of the project and run the following:

npm init @vitejs/app --template lit-element-ts

Then enter a project name lit-vscode-extension and now open the project in vscode and install the dependencies:

cd lit-vscode-extension
npm i -D @types/node
code .

Update the vite.config.ts with the following:

import { defineConfig } from "vite";
import { resolve } from…


In this article I will go over how to set up a Lit web component and use it to create a interactive canvas with CSS transforms and slots.

TLDR The final source here and an online demo.

Prerequisites #

  • Vscode
  • Node >= 12
  • Typescript

Getting Started #

We can start off by navigating in terminal to the location of the project and run the following:

npm init @vitejs/app --template lit-element-ts

Then enter a project name lit-css-canvas and now open the project in vscode and install the dependencies:

cd lit-css-canvas
npm i lit
npm i -D @types/node
code .

Update the vite.config.ts with the following:

import…

In this article I will go over how to set up a Lit web component and use it to render musicxml from a src attribute or inline xml using opensheetmusicdisplay.

Now any sheet music can be rendered based on the browser width as an svg or canvas (and will resize when the viewport changes).

TLDR The final source here and an online demo.

Prerequisites #

  • Vscode
  • Node >= 12
  • Typescript

Getting Started #

We can start off by navigating in terminal to the location of the project and run the following:

npm init @vitejs/app --template lit-element-ts

Then enter a project name lit-sheet-music and now open…


In this article I will go over how to set up a Lit web component and use it to create a HTML Table from json url or inline json.

TLDR The final source here and an online demo.

Prerequisites #

  • Vscode
  • Node >= 12
  • Typescript

Getting Started #

We can start off by navigating in terminal to the location of the project and run the following:

npm init @vitejs/app --template lit-element-ts

Then enter a project name lit-html-table and now open the project in vscode and install the dependencies:

cd lit-html-table
npm i lit
npm i -D @types/node
code .

Update the vite.config.ts with the following:


In this article I will go over how to set up a Lit web component and use it to create a rich text editor.

TLDR The final source here and an online demo.

Prerequisites #

  • Vscode
  • Node >= 12
  • Typescript

Getting Started #

We can start off by navigating in terminal to the location of the project and run the following:

npm init @vitejs/app --template lit-element-ts

Then enter a project name lit-rich-text-editor and now open the project in vscode and install the dependencies:

cd lit-rich-text-editor
npm i @material/mwc-icon-button
npm i -D @types/node
code .

Update the vite.config.ts with the following:

import { defineConfig } from…

In this article I will go over how to set up a Lit web component and use it to create a figma plugin.

TLDR You can find the final source here.

Prerequisites #

  • Vscode
  • Figma Desktop
  • Node
  • Typescript

Getting Started #

We can start off by creating a empty directory and naming it with snake_case whatever we want.

mkdir figma_lit_example
cd figma_lit_example

Web Setup #

Now we are in the figma_lit_example directory and can setup Figma and Lit. Let's start with node.

npm init -y

This will setup the basics for a node project and install the packages we need. Now lets add some config files. Now open…


In this article I will go over how to set up a Lit web component and use it inline in the Flutter widget tree.

TLDR You can find the final source here.

The reason you would want this integration is so you can take an existing web app, or just a single part of it and embed it in the widget tree.

With it wrapped in Flutter you can call device APIs from event listeners on your web component.

For example you may have an app that handles purchases, and now you can call the in app purchase API or…


If you are using Firebase then you are probably familiar with Firebase Cloud Messaging. The setup on Flutter web is very different than mobile and other plugins you are probably used to.

Setting Up #

Open your web/index.html and look for the following script. If you do not have one you can add it now in the tag.

<script>
if ("serviceWorker" in navigator) {
window.addEventListener("load", function () {
navigator.serviceWorker.register("/flutter_service_worker.js");
});
}
</script>

We need to modify it to support the FCM service worker. The important thing we need to do is comment out the flutter_service_worker.js …


Flutter is a UI Toolkit from Google allowing you to create expressive and unique experiences unmatched on any platform. You can write your UI once and run it everywhere. Yes everywhere! Web, iOS, Android, Windows, Linux, MacOS, Raspberry PI and much more…

If you prefer a video you can follow the YouTube series I am doing called “Flutter Take 5” where I explore topics that you encounter when building a Flutter application. I will also give you tips and tricks as I go through the series.

What is Flutter #

Flutter recently crossed React Native on Github and now has more than 2 million…

Rody Davis

I am a cross platform dev. I am currently using Flutter, Firebase, SQLite, Google Cloud Platform, Docker and WebAssembly. I am exploring Rust, C++, Go, WebXR.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store