LogoObsidian

HTML

Install Obsidian in a HTML environment

logomspaint
Groupbox
This is a toggle
This is a checkbox
This is a label
This is a label which wraps its text!
This is a label exposed to Labels
This is a label made with table options and an index
This is a label that doesn't wrap it's own text
This is my slider!
3/5
This is my custom display slider!
0/5
This is a textbox
Color
Keybind
MB2
Press Keybind
X
Groupbox #2
This label spans multiple lines! We're gonna run out of UI space... Just kidding! Scroll down! Hello from below!
Tab1 Toggle
Dropdowns
A dropdown
A searchable dropdown
A display formatted dropdown
A multi dropdown
A disabled dropdown
A dropdown with disabled value
A very long dropdown
A player dropdown
A team dropdown

version: example

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8" />
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    
    <!-- Obsidian -->
    <script src="https://www.mspaint.cc/widgets/obsidian.js"></script>

    <!-- Obsidian Scrollbar CSS -->
    <style>
      .no-scrollbar {
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none;    /* Firefox */
      }

      .no-scrollbar::-webkit-scrollbar {
        width: 0px;
        height: 0px;
        display: none;            /* Chrome, Safari, Opera */
      }
    </style>
  </head>
  <body>
    <Obsidian
      title="mspaint"
      footer="version: example"
      icon="https://www.mspaint.cc/icon.png"
      ui-data-src="https://raw.githubusercontent.com/mspaint-cc/webmspaint/refs/heads/main/registry/obsidian-demo/ObsidianExtracted.json">
    </Obsidian>
  </body>
</html>

Installation

Obsidian depends on TailwindCSS so you need to first setup TailwindCSS. You can do this by adding this line of code to the <head> section of your HTML file:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Then you can import the Obsidian widget script in the <head> section of your HTML file:

<script src="https://www.mspaint.cc/widgets/obsidian.js"></script>

You will also need to add the following lines of code into a stylesheet.

.no-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none;    /* Firefox */
}

.no-scrollbar::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  display: none;            /* Chrome, Safari, Opera */
}

Usage

<Obsidian
  title="mspaint"
  footer="version: example"
  icon="https://www.mspaint.cc/icon.png"
  ui-data-src="https://raw.githubusercontent.com/mspaint-cc/webmspaint/refs/heads/main/registry/obsidian-demo/ObsidianExtracted.json">
</Obsidian>

or

<Obsidian
  title="mspaint"
  footer="version: example"
  icon="https://www.mspaint.cc/icon.png"
>
  <!-- Obsidian UI Data -->
  <script type="application/json">
    { "tabs": { "Home": { "order": 1, "groups": [] } } }
  </script>
</Obsidian>

To check how the UI data is structured, you may refer to the UI parser or the UI Element Typedefs. Additionally, the test view page allows you to test the extracted JSON UI data.

Extra Resources

If you want to automatically dump your obsidian UI to a JSON file, you can use the following script which will save a file named ObsidianExtracted.json in your executor's workspace folder:

loadstring(game:HttpGet("https://raw.githubusercontent.com/mspaint-cc/assets/refs/heads/main/uidata/extractor.lua"))()

This file can then be put in a static path and imported in the ui-data-src prop of the Obsidian component:

<Obsidian title="mspaint" footer="version: example" icon="./icon.png" ui-data-src="./ObsidianExtracted.json"></Obsidian>

On this page

InstallationUsageExtra Resources