JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 5
  • Score
    100M100P100Q30977F
  • License MIT

A custom React package for Roblox-TS with HTML and CSS support.

Package Exports

  • @hn-studios/react
  • @hn-studios/react/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@hn-studios/react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@rbxtsx/web

@rbxtsx/web is a powerful Roblox-TS transformer that brings the familiarity and ease of web development with HTML and CSS to Roblox UI creation using React. Build your Roblox UI using standard HTML tags and style them with CSS, all while enjoying the benefits of TypeScript's type safety.

Features

  • HTML-like Syntax: Construct your Roblox UI using familiar HTML tags like <div>, <span>, <p>, <h1>, <img>, <button>, <ul>, <li>, <table>, and many more directly within your Roblox-TS React components.
  • CSS Styling: Style your UI elements using a wide range of supported CSS properties, including:
    • Text Styling: color, font-size, font-weight, font-style, font-family, text-align, text-decoration, line-height, letter-spacing, text-transform, text-indent, white-space, word-break, text-shadow, vertical-align, text-opacity
    • Background: background-color, background-image, background-repeat, background-position, background-size, background-opacity
    • Border: border, border-width, border-style, border-color, border-radius, border-top-, border-right-, border-bottom-, border-left-, border-top-color, border-right-color, border-bottom-color, border-left-color, border-top-width, border-right-width, border-bottom-width, border-left-width, border-top-style, border-right-style, border-bottom-style, border-left-style, border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius, border-opacity
    • Layout: display, width, height, min-width, min-height, max-width, max-height, padding, padding-top, padding-right, padding-bottom, padding-left, margin, margin-top, margin-right, margin-bottom, margin-left, position, top, right, bottom, left, z-index, overflow, overflow-x, overflow-y, visibility
    • Flexbox (Partial): flex-direction, justify-content, align-items, flex-wrap, gap
    • Units: px, em, rem, %, vw, vh
    • Other: opacity, transform (partially supported: rotate, scale, translate), box-shadow, cursor, outline, resize
  • Multiple CSS Files: Define your styles across multiple CSS files for better organization.
  • Type Safety: Leverage TypeScript's type safety with comprehensive type definitions for HTML attributes and CSS properties.
  • Familiar Development Workflow: Utilize your existing web development knowledge and tools when building Roblox UIs.

Installation

  1. Install the package using npm or pnpm:

    npm install @rbxtsx/web
pnpm install @rbxtsx/web

  2. Add the transformer to your tsconfig.json:

    {
  "compilerOptions": {
    // ... other compiler options
    "plugins": [
      {
        "transform": "@rbxtsx/web/transformer",
        "cssFilePaths": [
          "./src/style.css", 
          "./src/ui/theme.css" 
        ]
      }
    ]
  }
}
    • transform: Specifies the path to the transformer.
    • cssFilePaths: An array of paths to your CSS files, relative to the tsconfig.json file.

  3. Rojo Integration (Optional):

    • If you're using Rojo for your Roblox project, add the following to your project configuration (e.g., default.project.json):

      {
  "include": "src/**/*.css"
}

    • Add this line to your .rbxignore

      **/*.css

    • This ensures that your CSS files are included in your Rojo project.

Usage

Here's a simple example demonstrating how to use @rbxtsx/web:

// src/index.tsx
import React from "@rbxts/react";
import ReactRoblox from "@rbxts/react-roblox";

const App = () => {
  return (
    <body>
      <div className="container">
        <h1 className="title">Hello, Roblox!</h1>
        <p className="description">This UI is built with HTML and CSS.</p>
        <button className="my-button">Click Me</button>
      </div>
    </body>
  );
};

const root = ReactRoblox.createRoot(
  game.GetService("Players").LocalPlayer.WaitForChild("PlayerGui"),
);
root.render(<App />);
content_copy
download
Use code with caution.
Markdown
/* src/style.css */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 20px;
}

.title {
  font-size: 2rem;
  color: #228b22; /* Forest green */
  margin-bottom: 10px;
}

.description {
  font-size: 1rem;
  color: #696969; /* Dim gray */
  margin-bottom: 20px;
}

.my-button {
  background-color: #0078d7; /* Windows blue */
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
}
content_copy
download
Use code with caution.
Css

In this example:

We use HTML tags like <body>, <div>, <h1>, <p>, and <button> to structure the UI.

We apply CSS classes (e.g., container, title, description, my-button) defined in style.css to style the elements.

The transformer will convert these HTML tags and CSS styles into the appropriate Roblox UI elements and properties.

Supported HTML Tags

The following table shows the mapping between HTML tags and their corresponding Roblox UI instances:

HTML	Roblox UI
<body>	ScreenGui
<div>	Frame
<span>	TextLabel
<p>	TextLabel
<h1> - <h6>	TextLabel
<img>	ImageLabel
<button>	TextButton
<input>	TextBox
<video>	VideoFrame
<iframe>	ViewportFrame
<ol>	ScrollingFrame
<ul>	ScrollingFrame
<li>	Frame
<table>	Frame
<tr>	Frame
<td>	Frame
<th>	Frame
<form>	Frame
<fieldset>	Frame
<legend>	TextLabel
<label>	TextLabel
<textarea>	TextBox
<select>	Frame
<option>	TextButton
<pre>	TextLabel
<code>	TextLabel
<blockquote>	Frame
<hr>	Frame
<a>	TextButton
Supported CSS Properties

@rbxtsx/web supports a wide range of CSS properties. Here's a categorized list:

Text Styling

color

font-size (supports px, em, rem, %)

font-weight (numeric values and keywords like bold, normal)

font-style (normal, italic)

font-family

text-align (left, center, right)

text-decoration (Not yet supported)

line-height

letter-spacing

text-transform (uppercase, lowercase, capitalize)

text-indent

white-space (normal, nowrap, pre, pre-line, pre-wrap)

word-break (normal, break-all, keep-all)

text-shadow (Not yet supported)

vertical-align (baseline, top, middle, bottom)

text-opacity

Background

background-color

background-image (Partially supported: only url() with asset IDs)

background-repeat

background-position

background-size

background-opacity

Border

border (shorthand, partially supported: border-width, border-style, border-color)

border-width

border-style (solid, dashed, dotted, double, none)

border-color

border-radius

border-top-, border-right-, border-bottom-, border-left- (individual sides)

border-top-color, border-right-color, border-bottom-color, border-left-color

border-top-width, border-right-width, border-bottom-width, border-left-width

border-top-style, border-right-style, border-bottom-style, border-left-style

border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius

border-opacity

Layout

display (block, inline, inline-block, flex, none)

width (supports px, em, rem, %, vw, vh)

height (supports px, em, rem, %, vw, vh)

min-width (supports px, em, rem, %, vw, vh)

min-height (supports px, em, rem, %, vw, vh)

max-width (supports px, em, rem, %, vw, vh)

max-height (supports px, em, rem, %, vw, vh)

padding (supports px, em, rem, %)

padding-top

padding-right

padding-bottom

padding-left

margin (Not directly supported, no single equivalent in Roblox UI)

margin-top (Not directly supported)

margin-right (Not directly supported)

margin-bottom (Not directly supported)

margin-left (Not directly supported)

position (static, relative, absolute, fixed - note that fixed may not behave exactly as in web browsers)

top

right

bottom

left

z-index

overflow (visible, hidden, scroll, auto)

overflow-x

overflow-y

visibility (visible, hidden)

Flexbox (Partial Support)

flex-direction (row, column)

justify-content (flex-start, flex-end, center, space-between, space-around)

align-items (flex-start, flex-end, center, stretch)

flex-wrap (nowrap, wrap)

gap

Units

px (pixels)

em (relative to the font size of the element)

rem (relative to the root font size)

% (percentage)

vw (viewport width)

vh (viewport height)

Other

opacity

transform (partially supported: rotate, scale, translate)

box-shadow (Not yet supported)

cursor (Partially supported: mapping to Roblox's Enum.UserInputType)

outline (Not yet supported)

resize (Not yet supported)

Limitations

Pseudo-classes: :hover, :active, :focus are not fully supported. You can simulate some of these using Roblox events like MouseEnter, MouseLeave, MouseButton1Down, MouseButton1Up, FocusGained, and FocusLost.

Pseudo-elements: ::before, ::after are not currently supported.

Media Queries: Not directly supported. You might be able to achieve similar results by using GetPropertyChangedSignal on game:GetService("WindowManager"):GetCoreGuiEnabled("ViewportSize") to detect screen size changes and apply different styles conditionally.

Advanced Layout: Complex flexbox and grid layouts might require manual adjustments or the use of Roblox's UI layout instances like UIListLayout, UIGridLayout, and UIPadding.

Animations: CSS transition and animation properties are not currently supported.

!important: The !important flag in CSS is not supported.

Contributing

Contributions to @rbxtsx/web are welcome! If you have ideas for improvements, new features, or bug fixes, please feel free to open an issue or submit a pull request on the GitHub repository.

License

This project is licensed under the MIT License - see the LICENSE file for details.