[TekMol]

I'm all for a lightweight approach to software development. But I don't understand the concept here.

Looking at the first example:

First I had to switch it from TS to JS. As I don't consider something that needs compilation before it runs to be lightweight.

Then, the first line is:

    import {html, css, LitElement} from 'lit';

What is this? This is not a valid import. At least not in the browser. Is the example something that you have to compile on the server to make it run in the browser?

And when I use the "download" button on the playground version of the first example, I get a "package.json" which defines dependencies. That is also certainly not something a browser can handle.

So do I assume correctly that I need to set up a webserver, a dependency manager, and a serverside runtime to use these "light weight" components?

Or am I missing something? What would be the minimal amount of steps to save the example and actually have it run in the browser?

[Ruphin]

I guess for most people the standard is to install things from NPM which explains the format of the documentation. If you want to do something completely raw, you can replace 'lit' with something like this:

https://unpkg.com/lit@3.3.1/index.js?module

You can even dynamically import that in the a running browser console and use it directly on any webpage.

[TekMol]

    I guess for most people the standard is to install things from NPM

"things" that run in the browser?

    replace 'lit' with something like this:
    https://unpkg.com/lit@3.3.1/index.js?module

Thanks, that works:

https://plnkr.co/edit/2y9JEOgSZLpO4bE7

[Ruphin]

I estimate the vast majority of "web projects" begin with npm installing something of some sort, yes. React is dominating the web development space (judging from the average "popular web stack 2025" search result), and it and a significant portion of the competing platforms start with installing some dependencies with npm (or yarn, or what have you). Especially projects that compete in the same space as Lit.

That isn't a criticism of projects that don't use npm, and it doesn't make them less valid, but it makes sense for the documentation to match the average developer's experience.

[Ruphin]

Obviously this wouldn't be suitable for (serious) production deployments, but it is a super accessible way to easily get started anywhere.

[fmbb]

The browser supports module imports. But your script must be of type ”module”: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...

[TekMol]

Not with paths like 'lit' that is used here.

[uallo]

Import map:

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...

[TekMol]

The example does not use an importmap attribute.

Overall, the example does not seem like something that is supposed to run directly in the browser without some kind of intermediate step.

That is why I asked what the minimal number of steps would be to download the example and have it work locally.

[brazukadev]

The maintainers and then the docs assume that everyone is using typescript