@rbxtsx/web-compiler NPM

@rbxtsx/web-compiler

UNDER DEVELOPMENT

A TypeScript-based web compiler for Roblox, allowing you to compile HTML and CSS into Roblox UI components.

Important Configuration

1. Update tsconfig.json

Add @rbxtsx to your typeRoots:

{
  "compilerOptions": {
    "typeRoots": [
      "node_modules/@rbxts",
      "node_modules/@rbxtsx",  // Add this line
      "node_modules/@types"
    ]
  }
}

Update default.project.json

Add the @rbxtsx scope to your Rojo configuration:

{
  "ReplicatedStorage": {
    "$className": "ReplicatedStorage",
    "rbxts_include": {
      "$path": "include",
      "node_modules": {
        "$className": "Folder",
        "@rbxts": {
          "$path": "node_modules/@rbxts"
        },
        "@rbxtsx": {           // Add this block
          "$path": "node_modules/@rbxtsx"
        }
      }
    }
  }
}

Installation

npm install @rbxtsx/web-compiler

Features

Converts HTML elements to Roblox UI instances
Transforms CSS styles to Roblox properties
Supports basic HTML tags (div, span, button, input)
Handles common CSS properties
TypeScript support

Usage

import { HTMLParser, CSSParser, Transformer } from "@rbxtsx/web-compiler";

// Parse HTML
const htmlParser = new HTMLParser(htmlString);
const htmlAst = htmlParser.parse();

// Parse CSS
const cssParser = new CSSParser(cssString);
const cssRules = cssParser.parse();

// Transform to Roblox code
const transformer = new Transformer();
const robloxCode = transformer.transformHTML(htmlAst);
const robloxStyles = transformer.transformCSS(cssRules);