# Is it possible to use vanilla js, html and css instead of a framework

**URL:** <https://forum.dfinity.org/t/is-it-possible-to-use-vanilla-js-html-and-css-instead-of-a-framework/951>\
**Category:** Developers\
**Created:** [July 28, 2020, 8:48pm UTC](https://forum.dfinity.org/t/is-it-possible-to-use-vanilla-js-html-and-css-instead-of-a-framework/951 "2020-07-28T20:48:02Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Fulco](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/fulco/32/910_2.png) [@Fulco](https://forum.dfinity.org/u/Fulco)\
**Post date:** [July 28, 2020, 8:48pm UTC](https://forum.dfinity.org/t/is-it-possible-to-use-vanilla-js-html-and-css-instead-of-a-framework/951/1 "2020-07-28T20:48:02Z")

</div>

If I want to serve a completely static webpage do I have to use something like react or vue? When I read through the frontend documentation I see the following:

“Currently, you can only use Javascript to implement the front-end for your canister. This tutorial illustrates using the React framework to manage the Document Object Model (DOM) for your canister. Because React has its own custom DOM syntax, you need to modify the webpack configuration to compile the front-end code, which is written in JSX. For more information about learning to use React and JSX, see [Getting started](https://reactjs.org/docs/getting-started.html) on the [React website](https://reactjs.org/)”

Does that mean that there is no way to just directly serve a html page?

---

<div class="post-metadata">

**Author:** ![andrew\_DFN](https://avatars.discourse-cdn.com/v4/letter/a/f14d63/32.png) [@andrew\_DFN](https://forum.dfinity.org/u/andrew_DFN)\
**Post date:** [July 28, 2020, 10:26pm UTC](https://forum.dfinity.org/t/is-it-possible-to-use-vanilla-js-html-and-css-instead-of-a-framework/951/2 "2020-07-28T22:26:04Z")

</div>

Hey Fulco,

> Does that mean that there is no way to just directly serve a html page?

Not at all! Right now we are currently using webpack to bundle your UI assets, so one thing you could do is something like this:

Have an index.html file in an asset canister ([Home | Internet Computer](https://sdk.dfinity.org/docs/developers-guide/tutorials/explore-templates.html#default-frontend))

```auto
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

```

and have an `index.js` file:

```auto
// import the canister (using webpack to resolve the JS for you)
import canister from "ic:canisters/{your-canister-name}";

// use the asset canister's retrieve method to request a file (the `index.html` file from above)
canister.retrieve('index.html').then( htmlBytes => {
  // now that you have the html, decode it and create a new element
  const html = new TextDecoder().decode(new Uint8Array(htmlBytes));
  const el = new DOMParser().parseFromString(html, "text/html");
  // insert your HTML into the bootstrap HTML under the element with id `"app"`
  document.body.replaceChild(el.firstElementChild, document.getElementById('app'));
})

```

Let me know if you have any questions, I may have taken a few shortcuts here for simplicity’s sake.

---

<div class="post-metadata">

**Author:** ![Fulco](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/fulco/32/910_2.png) [@Fulco](https://forum.dfinity.org/u/Fulco)\
**Post date:** [July 29, 2020, 9:36pm UTC](https://forum.dfinity.org/t/is-it-possible-to-use-vanilla-js-html-and-css-instead-of-a-framework/951/3 "2020-07-29T21:36:30Z")

</div>

Thanks for the reply! I think in your example htmlBytes is supposed to be result? However when I try that I get the following error:

`VM372:1 Uncaught (in promise) TypeError: Failed to execute 'decode' on 'TextDecoder': The provided value is not of type '(ArrayBuffer or ArrayBufferView)' at eval (eval at _loadJs (bootstrap.js:formatted:9872), <anonymous>:1:1217)`

 ![error](https://us1.discourse-cdn.com/flex023/uploads/dfn/original/1X/3f9efa759684feef6cb87b5d42fa94c1c2dd0209.png)

this is my setup btw a new project on with `dfx new carbosix` in 6.0

 ![vscode](https://us1.discourse-cdn.com/flex023/uploads/dfn/original/1X/ecd5177a71b1b73cc46aa4a57c1febd99e3c1be1.png)

---

<div class="post-metadata">

**Author:** ![Carbosix](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/carbosix/32/23577_2.png) [@Carbosix](https://forum.dfinity.org/u/Carbosix)\
**Post date:** [July 30, 2020, 9:47am UTC](https://forum.dfinity.org/t/is-it-possible-to-use-vanilla-js-html-and-css-instead-of-a-framework/951/4 "2020-07-30T09:47:12Z")

</div>

This was very helpful @andrew_DFN, thank you.  
I got this to build ok on 6.0, however, it’s not displaying on the frontend.  
Are any changes to main.mo required?

---

<div class="post-metadata">

**Author:** ![andrew\_DFN](https://avatars.discourse-cdn.com/v4/letter/a/f14d63/32.png) [@andrew\_DFN](https://forum.dfinity.org/u/andrew_DFN)\
**Post date:** [July 30, 2020, 9:34pm UTC](https://forum.dfinity.org/t/is-it-possible-to-use-vanilla-js-html-and-css-instead-of-a-framework/951/5 "2020-07-30T21:34:42Z")

</div>

Right you are, @Fulco! I missed a critical step, my apologies.

I edited my code above, but instead of `const html = new TextDecoder(result)` it should be `const html = new TextDecoder().decode(new Uint8Array(result));`

Here’s a [link to my example repo](https://github.com/codelemur/basic-html-dfx-0.6.1) with the above stuff workin 🙂 hope this helps!

---

<div class="post-metadata">

**Author:** ![andrew\_DFN](https://avatars.discourse-cdn.com/v4/letter/a/f14d63/32.png) [@andrew\_DFN](https://forum.dfinity.org/u/andrew_DFN)\
**Post date:** [July 30, 2020, 9:36pm UTC](https://forum.dfinity.org/t/is-it-possible-to-use-vanilla-js-html-and-css-instead-of-a-framework/951/6 "2020-07-30T21:36:15Z")

</div>

Hey @Carbosix let me know if the above code changes work for you? Shouldn’t require changes to `main.mo`, no.

---

<div class="post-metadata">

**Author:** ![Carbosix](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/carbosix/32/23577_2.png) [@Carbosix](https://forum.dfinity.org/u/Carbosix)\
**Post date:** [July 31, 2020, 7:30am UTC](https://forum.dfinity.org/t/is-it-possible-to-use-vanilla-js-html-and-css-instead-of-a-framework/951/7 "2020-07-31T07:30:16Z")

</div>

Works perfectly!!! Thanks again!
