Getting Started
Mount the bundled assets and wire verified solverforge-ui primitives into an Axum app.
Getting Started with solverforge-ui
This guide covers the verified integration path:
- add the crate
- mount
/sf/*assets with.merge(solverforge_ui::routes()) - include the bundled CSS and JS
- instantiate components plus the backend and solver helpers
Add the Dependency
[dependencies]
axum = "0.8"
solverforge-ui = "0.3.1"
Mount /sf/* Routes in Axum
use axum::{routing::get, Router};
async fn index() -> &'static str {
include_str!("../static/index.html")
}
fn app() -> Router {
Router::new()
.route("/", get(index))
.merge(solverforge_ui::routes())
}
solverforge_ui::routes() serves the embedded /sf/* assets. Your application
still owns its HTML pages and any schedule/solver API routes.
Include Required Assets in HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>solverforge-ui quickstart</title>
<link
rel="stylesheet"
href="/sf/vendor/fontawesome/css/fontawesome.min.css"
/>
<link rel="stylesheet" href="/sf/vendor/fontawesome/css/solid.min.css" />
<link rel="stylesheet" href="/sf/sf.css" />
</head>
<body class="sf-app">
<script src="/sf/sf.js"></script>
<script>
var tabs = SF.createTabs({
tabs: [
{ id: 'plan', content: '<div>Plan view</div>', active: true },
{ id: 'gantt', content: '<div>Gantt view</div>' },
],
});
document.body.appendChild(tabs.el);
var backend = SF.createBackend({ type: 'axum' });
var header = SF.createHeader({
title: 'SolverForge Scheduler',
subtitle: 'by SolverForge',
tabs: [
{ id: 'plan', label: 'Plan', active: true },
{ id: 'gantt', label: 'Gantt' },
],
onTabChange: function (id) {
tabs.show(id);
},
});
document.body.prepend(header);
var statusBar = SF.createStatusBar({ header: header, constraints: [] });
header.after(statusBar.el);
var solver = SF.createSolver({
backend: backend,
statusBar: statusBar,
onUpdate: function (schedule) {
console.log('updated schedule', schedule);
},
});
</script>
</body>
</html>
Application Routes
solverforge-ui does not generate your scheduling API. The crate ships the UI
surface and a set of backend helpers. If you use
SF.createBackend({ type: 'axum' }), follow the default adapter contract
documented in Integration & Assets, or add an
application-side compatibility layer while your routes are still in transition.
Next Steps
- Read Components to build richer page layouts.
- Read Scheduling Views for timeline rail and Gantt examples.
- Read Integration & Assets for backend adapters, asset serving, and versioned bundle behavior.
Feedback
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.