Is there any quick start for me to use M3 web without using NPM. I mean just like Bootstrap 5 CDN or something similar.

[gensart-ai]

Thankyou

[asyncliz]

You can use ESM bundler CDNs, such as esm.run by jsdelivr.

<script src="https://esm.run/@material/web/all.js" type="module"></script>

Example: https://jsbin.com/fuqucadobo/edit?html,output

[datvm]

Alternatively if you want just an already bundled script (without multiple imports), you can use this: https://github.com/datvm/material-web

[treeder]

I would recommend using import maps for this, makes everything work better and faster:

Put this in your :

  <script type="importmap">
        {
          "imports": {
            "lit": "https://cdn.jsdelivr.net/npm/lit@3/index.js",
            "lit/": "https://cdn.jsdelivr.net/npm/lit@3/",
            "@material/web/": "https://cdn.jsdelivr.net/npm/@material/web@1/",
            "@lit/localize": "https://cdn.jsdelivr.net/npm/@lit/localize/lit-localize.js",
            "@lit/reactive-element": "https://cdn.jsdelivr.net/npm/@lit/reactive-element@1/reactive-element.js",
            "@lit/reactive-element/": "https://cdn.jsdelivr.net/npm/@lit/reactive-element@1/",
            "lit-element/lit-element.js": "https://cdn.jsdelivr.net/npm/lit-element@4/lit-element.js",
            "lit-html": "https://cdn.jsdelivr.net/npm/lit-html@3/lit-html.js",
            "lit-html/": "https://cdn.jsdelivr.net/npm/lit-html@3/",
            "tslib": "https://cdn.jsdelivr.net/npm/tslib@2/tslib.es6.mjs"
          }
        }
        </script>

Then import only what you need:

import '@material/web/textfield/filled-text-field.js'