diff --git a/server/src/config/about.rs b/server/src/config/about.rs
index cd33035..0144937 100644
--- a/server/src/config/about.rs
+++ b/server/src/config/about.rs
@@ -1,6 +1,6 @@
 use serde::{Serialize, Deserialize};
 
-#[derive(Serialize, Deserialize)]
+#[derive(Serialize, Deserialize, Clone)]
 pub struct AboutConfig {
     pub name: String,
     pub version: String,
diff --git a/server/src/config/action.rs b/server/src/config/action.rs
index 0b14c8e..b379355 100644
--- a/server/src/config/action.rs
+++ b/server/src/config/action.rs
@@ -1,13 +1,13 @@
 use serde::{Serialize, Deserialize};
 
-#[derive(Serialize, Deserialize)]
+#[derive(Serialize, Deserialize, Clone)]
 #[serde(tag = "action")]
 pub enum ActionConfig {
     #[serde(rename = "command")] 
     Command(CommandAction),
 }
 
-#[derive(Serialize, Deserialize)]
+#[derive(Serialize, Deserialize, Clone)]
 pub struct CommandAction {
     pub run: String,
 }
diff --git a/server/src/config/base.rs b/server/src/config/base.rs
index c0eb668..f2665d1 100644
--- a/server/src/config/base.rs
+++ b/server/src/config/base.rs
@@ -2,7 +2,7 @@ use serde::{Serialize, Deserialize};
 
 use super::{ElementConfig, AboutConfig};
 
-#[derive(Serialize, Deserialize)]
+#[derive(Serialize, Deserialize, Clone)]
 #[serde(tag = "api-version")]
 pub enum BaseConfig {
     #[serde(rename = "v0.0.0")]
diff --git a/server/src/config/button.rs b/server/src/config/button.rs
index e946a7d..c9dba21 100644
--- a/server/src/config/button.rs
+++ b/server/src/config/button.rs
@@ -2,7 +2,7 @@ use serde::{Serialize, Deserialize};
 
 use super::ActionConfig;
 
-#[derive(Serialize, Deserialize)]
+#[derive(Serialize, Deserialize, Clone)]
 pub struct ButtonConfig {
     pub title: String,
     pub on_click: ActionConfig,
diff --git a/server/src/config/element.rs b/server/src/config/element.rs
index 2b3eacd..09bb59b 100644
--- a/server/src/config/element.rs
+++ b/server/src/config/element.rs
@@ -2,7 +2,7 @@ use serde::{Serialize, Deserialize};
 
 use super::{ButtonConfig, ToggleConfig, SliderConfig, ReadingConfig};
 
-#[derive(Serialize, Deserialize)]
+#[derive(Serialize, Deserialize, Clone)]
 #[serde(tag = "element")]
 pub enum ElementConfig {
     #[serde(rename = "button")]
diff --git a/server/src/config/mod.rs b/server/src/config/mod.rs
index b9c9089..32f9b4f 100644
--- a/server/src/config/mod.rs
+++ b/server/src/config/mod.rs
@@ -36,6 +36,9 @@ mod test {
                 }),
                 ElementConfig::Slider(SliderConfig {
                     title: "Test Slider".into(),
+                    min: 0,
+                    max: 3,
+                    notches: None,
                     on_set: ActionConfig::Command(CommandAction{run: "echo 'hello slider'".into()}),
                 }),
                 ElementConfig::Reading(ReadingConfig {
diff --git a/server/src/config/reading.rs b/server/src/config/reading.rs
index 58d4bdb..790b828 100644
--- a/server/src/config/reading.rs
+++ b/server/src/config/reading.rs
@@ -2,9 +2,9 @@ use serde::{Serialize, Deserialize};
 
 use super::ActionConfig;
 
-#[derive(Serialize, Deserialize)]
+#[derive(Serialize, Deserialize, Clone)]
 pub struct ReadingConfig {
     pub title: String,
-    pub period_ms: usize,
+    pub period_ms: u64,
     pub on_period: ActionConfig,
 }
diff --git a/server/src/config/slider.rs b/server/src/config/slider.rs
index 9d02b15..a814c1c 100644
--- a/server/src/config/slider.rs
+++ b/server/src/config/slider.rs
@@ -2,8 +2,11 @@ use serde::{Serialize, Deserialize};
 
 use super::ActionConfig;
 
-#[derive(Serialize, Deserialize)]
+#[derive(Serialize, Deserialize, Clone)]
 pub struct SliderConfig {
     pub title: String,
+    pub min: u64,
+    pub max: u64,
+    pub notches: Option<Vec<String>>,
     pub on_set: ActionConfig,
 }
diff --git a/server/src/config/toggle.rs b/server/src/config/toggle.rs
index 835dfeb..871ae13 100644
--- a/server/src/config/toggle.rs
+++ b/server/src/config/toggle.rs
@@ -2,7 +2,7 @@ use serde::{Serialize, Deserialize};
 
 use super::ActionConfig;
 
-#[derive(Serialize, Deserialize)]
+#[derive(Serialize, Deserialize, Clone)]
 pub struct ToggleConfig {
     pub title: String,
     pub description: Option<String>,
diff --git a/src/backend.ts b/src/backend.ts
new file mode 100644
index 0000000..beb5205
--- /dev/null
+++ b/src/backend.ts
@@ -0,0 +1,81 @@
+import {init_usdpl, target, init_embedded, call_backend} from "usdpl-front";
+
+const USDPL_PORT: number = 25717;
+
+// Utility
+
+export function resolve(promise: Promise<any>, setter: any) {
+    (async function () {
+        let data = await promise;
+        if (data != null) {
+            console.debug("Got resolved", data);
+            setter(data);
+        } else {
+            console.warn("Resolve failed:", data);
+        }
+    })();
+}
+
+export async function initBackend() {
+    // init usdpl
+    await init_embedded();
+    init_usdpl(USDPL_PORT);
+    console.log("USDPL started for framework: " + target());
+    //setReady(true);
+}
+
+export type CAbout = {
+    name: string;
+    version: string;
+    description: string;
+    url: string | null;
+    author: string | null;
+    license: string | null;
+}
+
+export type CButton = {
+    element: string; // "button"
+    title: string;
+}
+
+export type CToggle {
+    element: string; // "toggle"
+    title: string;
+    description: string | null;
+}
+
+export type CSlider {
+    element: string; // "slider"
+    title: string;
+    min: number;
+    max: number;
+    notches: string[] | null;
+}
+
+export type CReading {
+    element: string; // "reading"
+    title: string;
+    period_ms: number;
+}
+
+export type CElement = CButton | CToggle | CSlider | CReading;
+
+export async function getElements(): Promise<CElement[]> {
+    return await call_backend("get_items", []);
+}
+
+export async function onUpdate(index: number, value: any): Promise<any> {
+    return (await call_backend("on_update", [index, value]))[0];
+}
+
+export async function getReading(index: number): Promise<string | null> {
+    return (await call_backend("get_reading", [index]))[0];
+}
+
+export async function getAbout(): Promise<CAbout> {
+    return (await call_backend("get_about", []))[0];
+}
+
+export async function reload(): Promise<CElement[]> {
+    return await call_backend("reload", []);
+}
diff --git a/src/index.tsx b/src/index.tsx
index e36d6dc..6a30cd3 100755
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -17,8 +17,7 @@ import { FaShip } from "react-icons/fa";
 import logo from "../assets/logo.png";
 
 import {init_usdpl, target, init_embedded, call_backend} from "usdpl-front";
-
-const USDPL_PORT: number = 54321;
+import * as backend from "./backend";
 
 // interface AddMethodArgs {
 //   left: number;