# Running HTML in idx

**URL:** <https://community.firebasestudio.dev/t/running-html-in-idx/523>\
**Category:** General\
**Created:** [June 9, 2024, 1:21pm UTC](https://community.firebasestudio.dev/t/running-html-in-idx/523 "2024-06-09T13:21:13Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![DevShayan](https://sea2.discourse-cdn.com/flex002/user_avatar/community.firebasestudio.dev/devshayan/32/472_2.png) [@DevShayan](https://community.firebasestudio.dev/u/DevShayan)\
**Post date:** [June 9, 2024, 1:21pm UTC](https://community.firebasestudio.dev/t/running-html-in-idx/523/1 "2024-06-09T13:21:13Z")

</div>

How do I run a simple web project (JS vanilla) in idx?

---

<div class="post-metadata">

**Author:** ![Sunny](https://sea2.discourse-cdn.com/flex002/user_avatar/community.firebasestudio.dev/sunny/32/85_2.png) [@Sunny](https://community.firebasestudio.dev/u/Sunny)\
**Post date:** [June 9, 2024, 1:55pm UTC](https://community.firebasestudio.dev/t/running-html-in-idx/523/2 "2024-06-09T13:55:34Z")

</div>

You should try and use the “Simple HTML” template

---

<div class="post-metadata">

**Author:** ![DevShayan](https://sea2.discourse-cdn.com/flex002/user_avatar/community.firebasestudio.dev/devshayan/32/472_2.png) [@DevShayan](https://community.firebasestudio.dev/u/DevShayan)\
**Post date:** [June 10, 2024, 12:25pm UTC](https://community.firebasestudio.dev/t/running-html-in-idx/523/3 "2024-06-10T12:25:15Z")

</div>

The project is on the Github so I use “Import a repo”

---

<div class="post-metadata">

**Author:** ![Sunny](https://sea2.discourse-cdn.com/flex002/user_avatar/community.firebasestudio.dev/sunny/32/85_2.png) [@Sunny](https://community.firebasestudio.dev/u/Sunny)\
**Post date:** [June 10, 2024, 3:12pm UTC](https://community.firebasestudio.dev/t/running-html-in-idx/523/4 "2024-06-10T15:12:59Z")

</div>

I see, you can still use the same `dev.idx` template:

```auto
{ pkgs, ... }: {
  # Which nixpkgs channel to use.
  channel = "stable-23.11"; # or "unstable"
  # Use https://search.nixos.org/packages to find packages
  packages = [
    pkgs.nodejs_20
    pkgs.python3
  ];
  # Sets environment variables in the workspace
  env = {};
  idx = {
    # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
    extensions = [
      # "vscodevim.vim"
    ];
    # Enable previews and customize configuration
    previews = {
      enable = true;
      previews = {
        web = {
          command = ["python3" "-m" "http.server" "$PORT" "--bind" "0.0.0.0"];
          manager = "web";
        };
      };
    };
  };
}

```

---

<div class="post-metadata">

**Author:** ![DevShayan](https://sea2.discourse-cdn.com/flex002/user_avatar/community.firebasestudio.dev/devshayan/32/472_2.png) [@DevShayan](https://community.firebasestudio.dev/u/DevShayan)\
**Post date:** [June 12, 2024, 2:11pm UTC](https://community.firebasestudio.dev/t/running-html-in-idx/523/5 "2024-06-12T14:11:54Z")

</div>

Thanks, it worked 👍
