\
**Category:** Showcase\
**Tags:** macro, haxe-js\
**Created:** [February 25, 2025, 12:55pm UTC](https://community.haxe.org/t/twinspire-web-a-new-macro-oriented-html-first-web-framework/4558 "2025-02-25T12:55:02Z")\
**Posts on this page:** 5\
**Page:** 1
**Author:**  [@tienery](https://community.haxe.org/u/tienery)\
**Post date:** [February 25, 2025, 12:55pm UTC](https://community.haxe.org/t/twinspire-web-a-new-macro-oriented-html-first-web-framework/4558/1 "2025-02-25T12:55:02Z")
Say goodbye to traditional web frameworks and say hello to compile-time HTML, React-like `Component`’s and more, with [Twinspire Web](https://codeberg.org/desinda/TwinspireWeb).
## Twinspire Web and what it’s for
Twinspire Web is a macro-based Haxe web development framework targeting NodeJS, JavaScript and PHP. It provides both front-end and back-end utilities to help you build websites and web applications faster, more reliably and scalable. It does this by providing a HTML-first approach, turning HTML documents into `Component` classes that can be re-used and incorporated into the compile-time of the Haxe compiler.
Twinspire Web is currently in Beta version 0.1.0. It is not currently released but some parts of the library are usable and up-to-date.
Some of the current features include:
- Use Twinspire Templates (an extension of Haxe Templates) to generate `Component` classes, fields for those `Component` classes, strictly-typed sub-templates, singles or arrays of other `Component` or `typedef` structures, use field references, and more.
- Use a basic `Router` class to perform routing in your website and generate web pages.
- Create simple runtimes that are easy to work with and build scalable websites.
## Roadmap
Twinspire Web has more to come ahead of its 1.0.0 version release. Our roadmap is as follows:
- Add database implementations for PHP and NodeJS. This will likely add externs for NodeJS as it does not come with database APIs by default.
- Implement a query-based system which involves interfaces for both client and server, allowing for the ability to join a series of queries in one line of code.
- Test the currently “implemented” client-based event system with the features above ready for release.
- General cleanup of the codebase, removing redundant code, some optimisations and refactoring.
## License
Twinspire Web is licensed under MIT.
## Documentation
Learn about [Twinspire Web here](https://codeberg.org/desinda/TwinspireWeb/wiki).
## Personal Note
I am working between the documentation and building the infrastructure for the database/SQL which is currently work-in-progress. I am swapping between the two between other commitments, but my main focus is on getting this released by April at the latest.
Most of the main features are implemented, such as `Component` classes and macros.
Another side-note, I don’t frequent these forums that much but I do observe from time-to-time. For better support on Twinspire Web, do consider submitting Issues on the repo as I will likely pick them up there faster than reports here.
Twinspire Web can be used as a front-end as part of your main tech stack if you want it as effectively another `React`. Alternatively, you can wait for the database API to be fully implemented for the respective targets (NodeJS & PHP). I may add more targets later depending on demand.
Thank you for your interest and support in advance.
## Get Started
Although there may be little context here, the following code snippets (taken from the [Your First HTML Page](https://codeberg.org/desinda/TwinspireWeb/wiki/Your-First-HTML-page) guide), can give you an idea as to the API and coding approach:
```haxe
package;
import twinspire.web._internal.js.KoaServer;
import twinspire.web.server.IRequest;
import twinspire.web.server.IResponse;
import components.Index;
class Main {
public static function main() {
var server = new KoaServer();
server.onRequest = onRequest;
server.init({
host: "localhost",
port: 5050
});
server.start();
}
static function onRequest(req:IRequest) {
return new Response();
}
}
class Response implements IResponse {
public function new() {
}
public function submitQueryView():String {
return new Index().render();
}
public function submitQueryRequest():Dynamic {
return null;
}
}
```
The component `Index.hx`:
```haxe
package components;
import twinspire.web.common.Component;
class Index extends Component {
public function new() {
super();
}
}
```
The initialisation macro class, `Macro.hx`:
```haxe
package;
#if macro
import twinspire.web.macros.html.HtmlObject;
import twinspire.web.macros.Run;
class Macro {
public static function init() {
Run.init();
HtmlObject.sourceFolder = "src";
HtmlObject.outputFolder = "www/pages";
var index = new HtmlObject();
index.className = "Index";
index.pack = "components";
index.fromLib = "";
index.postgeneratedHtmlPath = "www/pages/index.html";
index.addFromFile("templates/index.html");
Run.objects.push(index);
}
}
#end
```
---
**Author:**  [@logo](https://community.haxe.org/u/logo)\
**Post date:** [February 25, 2025, 1:22pm UTC](https://community.haxe.org/t/twinspire-web-a-new-macro-oriented-html-first-web-framework/4558/2 "2025-02-25T13:22:19Z")
This is really neat! You should post this in the Discord as well, I am sure some will find it helpful.
---
**Author:**  [@pinkboi](https://community.haxe.org/u/pinkboi)\
**Post date:** [March 3, 2025, 2:47pm UTC](https://community.haxe.org/t/twinspire-web-a-new-macro-oriented-html-first-web-framework/4558/3 "2025-03-03T14:47:33Z")
This is awesome! I’ve actually done something before where I made a macro that makes stuff from html and thought that might be a good basis for a haxe web framework and I’m glad someone actually took that idea to its logical conclusion. This might be something I make use of.
---
**Author:**  [@tienery](https://community.haxe.org/u/tienery)\
**Post date:** [March 6, 2025, 3:07pm UTC](https://community.haxe.org/t/twinspire-web-a-new-macro-oriented-html-first-web-framework/4558/4 "2025-03-06T15:07:17Z")
I’m glad to be of _some_ use to the Haxe community, given how long I’ve used this language for.
Let me know if you get any issues while experimenting.
---
**Author:**  [@rice](https://community.haxe.org/u/rice)\
**Post date:** [March 8, 2025, 12:07pm UTC](https://community.haxe.org/t/twinspire-web-a-new-macro-oriented-html-first-web-framework/4558/5 "2025-03-08T12:07:18Z")
Looks great! I’ll be waiting to use it.