Skip to content

About

HTML/CSS → Unity UI Toolkit: a .NET CLI converts HTML/CSS into UXML/USS, a runtime binds it to typed C# actions, routing, breakpoints and keyframe animation. UPM package, no browser in the player.

Topics

Resources

Stars

0 stars

Watchers

0 watching

Forks

Repository files navigation

HtmlToUitk — HTML/CSS → Unity UI Toolkit

HtmlToUitk turns a supported subset of HTML/CSS into native Unity UI Toolkit and runs it without a browser.

  • Converter (authoring time). A .NET CLI validates HTML/CSS and writes UXML, USS, localization keys, navigation (.nav.json), media-query (.mq.json) and animation (.anim.json) metadata, plus baked gradient PNGs with a hash manifest. Unsupported constructs produce explicit diagnostics instead of silent guesses.
  • Unity runtime. UitkScreen, UitkRouter, BreakpointWatcher, UitkAnimator and UitkActionBindings bind the generated tree to typed C# actions, pages/modals/tabs, responsive classes and keyframe animation. Labels and buttons stay live UI Toolkit controls. No browser, JavaScript engine or CLI assembly ships in the player.
  • Unity editor. The Neoxider → UI → HTML to UI Toolkit window runs jobs (draft, validate, convert, watch), shows findings with source locations and imports generated textures with verified ownership.

Version 1.0.0 is the first standalone release. Until NeoxiderTools 11.0.1 the same code shipped inside com.neoxider.tools; it now lives here with the same assembly names, namespaces and asset GUIDs.

Requirements

  • Unity 6000.3 or newer. Recorded native runs used 6000.3.14f1 and 6000.6.0f1.
  • To build the CLI: .NET SDK 10.0.301 (the CLI targets net9.0 and rolls forward with LatestMajor); to run it: the .NET 10 runtime. Python 3 is only needed for the optional oracle/preview tools and the sample regeneration scripts.

Install

From a git URL. Package Manager → + → Add package from git URL…:

https://github.com/NeoXider/HtmlToUitk.git

or add it to Packages/manifest.json:

"com.neoxider.htmltouitk": "https://github.com/NeoXider/HtmlToUitk.git"

From disk. Clone the repository and choose Add package from disk… → its package.json. This keeps the hidden Tools~ folder writable, so a CLI built there is discovered automatically.

Build the CLI

From the repository root:

dotnet publish Tools~/src/HtmlToUitk.Cli/HtmlToUitk.Cli.csproj -c Release --self-contained false -p:UseAppHost=false -p:RollForward=LatestMajor -o Tools~/bin
dotnet Tools~/bin/htmltouitk.dll run Tools~/fixtures/production-neutral/neutral.htujob.json

The editor looks for the CLI in this order: an explicit path chosen with CLI…; the project-relative Tools/HtmlToUitk/bin/htmltouitk.dll and its Release build; this package's Tools~/bin/htmltouitk.dll and Release build; finally htmltouitk on PATH. For a git-URL install, publish the CLI from a clone and select the DLL with CLI…, or publish it into <your project>/Tools/HtmlToUitk/bin.

Quick start

  1. Open Neoxider → UI → HTML to UI Toolkit. In Sources, add a local HTML file or folder (a new draft lives in memory until you Save it as a job JSON). Keep the output inside Assets; the draft default is Assets/UI/Generated.
  2. Run Validate Only or Convert and read Results: every finding names the rule, file/line and a fix.
  3. Assign the generated UXML to a UIDocument, add UitkScreen and assign the .nav.json, .mq.json and .anim.json files you need.
  4. Wire buttons to your own C# code:
using System;
using Neo.HtmlToUitk.Navigation;
using UnityEngine;
using UnityEngine.UIElements;

public sealed class MenuActions : MonoBehaviour
{
    [SerializeField] private UitkScreen screen;
    private IDisposable _play;

    private void OnEnable() => _play = screen.RegisterAction("play", Play);
    private void OnDisable() { _play?.Dispose(); _play = null; }
    private void Play(Button button) => Debug.Log("Play requested by " + button.name);
}

The same contracts work without a MonoBehaviour through UitkActionBindings, UitkRouter and BreakpointController. Runtime console output goes through HtmlToUitkDiagnostics: warnings are off by default (HtmlToUitkDiagnostics.Configure(warnings: true)), binding errors are on.

Sample

Velora Showcase (Package Manager → HtmlToUitk → Samples) converts four pages of the MIT Velora UI SaaS template with the real CLI: navigation, a modal, forms, local search, theme switching, keyframe animation, baked gradients and responsive breakpoints. It includes its VeloraShowcase.QA.PlayMode tests. See the sample README.

Tests

  • Unity: add the package to testables in Packages/manifest.json, then run the Edit Mode assembly Neo.HtmlToUitk.Tests.Editor in the Test Runner:

    "testables": [ "com.neoxider.htmltouitk" ]
  • Converter: dotnet test Tools~/HtmlToUitk.sln.

  • Portable pure logic shared with Unity: dotnet test Tests/Verification~/PureLogic.Tests.csproj.

Moving from NeoxiderTools

  • Use a NeoxiderTools version without the bundled converter. NeoxiderTools 11.0.1 and older still contain Assets/Neoxider/Scripts/UI/HtmlToUitk; installing both duplicates the assemblies and GUIDs.
  • Assembly names (Neo.HtmlToUitk.Runtime, Neo.HtmlToUitk.Editor, Neo.HtmlToUitk.Tests.Editor), namespaces, script and asset GUIDs, menu paths, EditorPrefs keys (Neoxider.HtmlToUitk.*) and job/config assets are unchanged, so scenes, prefabs and jobs keep their references.
  • The runtime no longer references Neo.Extensions. Converter warnings that were enabled with NeoDiagnostics.Configure(warnings: true) now use HtmlToUitkDiagnostics.Configure(warnings: true).
  • The Velora showcase moved from the repository folder Assets/HtmlToUitkShowcase into the package sample.

Repository layout

package.json        UPM manifest (com.neoxider.htmltouitk)
Runtime/            Neo.HtmlToUitk.Runtime: screen, router, actions, responsive, animation, blur, web contracts
Editor/             Neo.HtmlToUitk.Editor: window, jobs, importer, CLI/in-process bridges, watcher
Tests/              Neo.HtmlToUitk.Tests.Editor (+ Verification~ portable .NET projects)
Samples~/           Velora Showcase sample
Tools~/             .NET converter: src, tests, spec, fixtures, examples, oracle, tools
Documentation~/     User guides (Russian/English) and the verification record
dev-docs~/          Plans, research, task lists and historical QA evidence

Documentation

Scope: a documented HTML/CSS subset. Arbitrary JavaScript, React, full browser/CSS parity, every resolution and mobile/player certification are not claimed. The C# preview/compare commands return a nonzero "unsupported" result; the Python oracle alternatives are described in the production notes.

По-русски

HtmlToUitk конвертирует поддерживаемое подмножество HTML/CSS в нативный UI Toolkit: .NET CLI создаёт UXML/USS, ключи локализации, метаданные навигации, media queries и анимаций и запечённые PNG-градиенты, а runtime подключает их к типизированным C#-действиям без браузера и JavaScript в player. Установка — по git URL https://github.com/NeoXider/HtmlToUitk.git или из клона через Add package from disk; CLI собирается командой из раздела Build the CLI. Окно конвертера: Neoxider → UI → HTML to UI Toolkit. До NeoxiderTools 11.0.1 модуль входил в com.neoxider.tools; имена сборок, namespaces и GUID не изменились, поэтому сцены и префабы сохраняют ссылки. Основное руководство — Documentation~/HtmlToUitk.md.

License

License: not chosen yet — all rights reserved until a license is added. No license file is included on purpose. Third-party content inside the sample keeps its own terms: the Velora UI template is MIT (Samples~/VeloraShowcase/LICENSE-Velora.txt) and the Geist font is SIL OFL 1.1 (Samples~/VeloraShowcase/LICENSE-Geist.txt).

About

HTML/CSS → Unity UI Toolkit: a .NET CLI converts HTML/CSS into UXML/USS, a runtime binds it to typed C# actions, routing, breakpoints and keyframe animation. UPM package, no browser in the player.

Topics

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages