diff --git a/client/src/components/glyphview.svelte b/client/src/components/glyphview.svelte
index 48ead6d..0ba018c 100644
--- a/client/src/components/glyphview.svelte
+++ b/client/src/components/glyphview.svelte
@@ -1,5 +1,66 @@
 <script lang="ts">
-	let glyphSVG = $state("");
+	interface BoundingBox {
+		xmin: number,
+		xmax: number,
+		ymin: number,
+		ymax: number
+	};
+
+	interface ContourPoint {
+		x: number,
+		y: number
+	};
+
+	interface ContourElement {
+		Line?: number[],
+		Bezier?: number[]
+	}
+
+	interface Contour {
+		points: ContourPoint[],
+		elements: ContourElement[]
+	}
+
+	interface GlyphData {
+		bounding_box: BoundingBox,
+		contours: Contour[]
+	};
+
+	let glyphData: GlyphData= $state({
+		bounding_box: { xmin: 0, xmax: 0, ymin: 0, ymax: 0 },
+		contours: []
+	});
+
+	function getPathString(contour: Contour): string {
+		if (contour.elements?.length === 0) {
+			return "";
+		}
+
+		let firstPoint: number = -1;
+		if (contour.elements[0].Bezier) {
+			firstPoint = contour.elements[0].Bezier[0];
+		} else if (contour.elements[0].Line) {
+			firstPoint = contour.elements[0].Line[0];
+		} else {
+			return "";
+		}
+
+		let result = `M${contour.points[firstPoint].x} -${contour.points[firstPoint].y} `
+		contour.elements.forEach((element) => {
+			if (element.Bezier) {
+				let control = contour.points[element.Bezier[1]];
+				let end = contour.points[element.Bezier[2]];
+
+				result += `Q${control.x} -${control.y} ${end.x} -${end.y} `;
+			} else if (element.Line) {
+				let start = contour.points[element.Line[0]];
+				let end = contour.points[element.Line[1]];
+				result += `L${start.x} -${start.y} ${end.x} -${end.y} `;
+			} 
+		});
+
+		return result;
+	}
 
 	let { selectedChar = "", loading = $bindable() } = $props();
 
@@ -11,7 +72,7 @@
 		loading = true;
 		const response = fetch(`http://localhost:8000/glyph/${selectedChar}`)
 		.then((data) => {
-			data.text().then((result) => { glyphSVG = result });
+			data.json().then((result) => { glyphData = result });
 		})
 		.catch((err) => {
 			console.log(err);
@@ -26,7 +87,19 @@
 </script>
 
 <div class="glyph">
-{@html glyphSVG }
+<svg 
+	viewBox="{glyphData.bounding_box.xmin} -{glyphData.bounding_box.ymax} {glyphData.bounding_box.xmax - glyphData.bounding_box.xmin} {glyphData.bounding_box.ymax - glyphData.bounding_box.ymin}"
+	width="1000"
+	height="1000"
+	>
+
+	{#each glyphData.contours as contour}
+	<path 
+		style="fill:none; stroke:black; stroke-width: 3"
+		d="{getPathString(contour)}" 
+	/>
+	{/each}
+</svg>
 </div>
 
 <style>
diff --git a/server/Cargo.lock b/server/Cargo.lock
index 04d5d3d..012a518 100644
--- a/server/Cargo.lock
+++ b/server/Cargo.lock
@@ -384,6 +384,7 @@ dependencies = [
  "log",
  "rocket",
  "serde",
+ "serde_json",
  "simplelog",
 ]
 
diff --git a/server/Cargo.toml b/server/Cargo.toml
index db212d3..d1c6318 100644
--- a/server/Cargo.toml
+++ b/server/Cargo.toml
@@ -18,4 +18,5 @@ clap = { version = "4.5.21", features = ["derive"] }
 log = "0.4.26"
 rocket = "0.5.1"
 serde = { version = "1.0.215", features = ["derive", "serde_derive"] }
+serde_json = "1.0.140"
 simplelog = { version = "0.12.2", features = ["termcolor"] }
diff --git a/server/src/font.rs b/server/src/font.rs
index bfb0068..c3d9b1e 100644
--- a/server/src/font.rs
+++ b/server/src/font.rs
@@ -17,7 +17,7 @@ use log::{debug, info};
 use maximum_profile::MaximumProfile;
 use table_directory::TableDirectory;
 
-pub use glyph_data::{GlyphData, GlyphHeader, GlyphPoint, Glyph, SimpleGlyph, SplineElement};
+pub use glyph_data::{GlyphData, GlyphHeader, GlyphPoint, Glyph, SimpleGlyph, SplineElement, SplineElementData};
 
 fn deserialize<R: Read, T: serde::de::DeserializeOwned>(reader: R) -> bincode::Result<T> {
 	bincode::options().with_big_endian().with_fixint_encoding().deserialize_from::<R, T>(reader)
diff --git a/server/src/font/glyph_data.rs b/server/src/font/glyph_data.rs
index f8553a9..0344751 100644
--- a/server/src/font/glyph_data.rs
+++ b/server/src/font/glyph_data.rs
@@ -1,9 +1,9 @@
-use std::{collections::HashMap, fs::File, io::{BufReader, Read, Seek, SeekFrom}, iter::{zip, Peekable}, slice::Iter};
+use std::{collections::HashMap, fs::File, io::{BufReader, Read, Seek, SeekFrom}, iter::{zip, Enumerate, Peekable}, slice::Iter};
 
 use bincode::{ErrorKind, Result};
 use bitfield::bitfield;
 use log::{debug, error, info, warn};
-use serde::Deserialize;
+use serde::{Deserialize, Serialize};
 
 use super::{deserialize, deserialize_vec, index_to_location::IndexToLocation, table_directory::{FontTable, TableDirectoryRecord}};
 
@@ -79,7 +79,7 @@ impl<'a> Iterator for GlyphFlags<'a> {
 	}
 }
 
-#[derive(Debug, Copy, Clone)]
+#[derive(Debug, Copy, Clone, Serialize)]
 pub struct GlyphPoint {
 	pub x: i32,
 	pub y: i32,
@@ -252,35 +252,47 @@ pub struct Glyph {
 	pub data: GlyphData
 }
 
+#[derive(Debug, Clone, Copy)]
+pub struct IndexedGlyphPoint {
+	pub point: GlyphPoint,
+	pub index: usize
+}
+
 #[derive(Debug)]
-pub enum SplineElement {
-	Line(GlyphPoint, GlyphPoint),
-	Bezier(GlyphPoint, GlyphPoint, GlyphPoint)
+pub enum SplineElementData {
+	Line(IndexedGlyphPoint, IndexedGlyphPoint),
+	Bezier(IndexedGlyphPoint, IndexedGlyphPoint, IndexedGlyphPoint)
+}
+
+#[derive(Debug)]
+pub struct SplineElement {
+	pub data: SplineElementData,
+	pub is_last: bool
 }
 
 pub struct SplineIter<'a> {
-	points: Box<dyn Iterator<Item = GlyphPoint> + 'a>,
+	points: Enumerate<Box<dyn Iterator<Item = GlyphPoint> + 'a>>,
 
-	last_point: Option<GlyphPoint>,
-	final_control: Option<GlyphPoint>,
-	first_point: Option<GlyphPoint>
+	last_point: Option<IndexedGlyphPoint>,
+	final_control: Option<IndexedGlyphPoint>,
+	first_point: Option<IndexedGlyphPoint>
 }
 
 impl<'a> SplineIter<'a> {
 	fn handle_spline_start(&mut self) -> Result<()> {
-		let Some(point) = self.points.next() else {
+		let Some((index, point)) = self.points.next() else {
 			return Err(ErrorKind::Custom("Not enough points in contous to form a spline".into()).into());
 		};
 
 		if point.on_curve {
-			self.last_point = Some(point);
-			self.first_point = Some(point);
+			self.last_point = Some(IndexedGlyphPoint { point, index });
+			self.first_point = Some(IndexedGlyphPoint { point, index });
 			return Ok(());
 		} else {
-			self.final_control = Some(point);
+			self.final_control = Some(IndexedGlyphPoint { point, index });
 		}
 
-		let Some(point) = self.points.next() else {
+		let Some((index, point)) = self.points.next() else {
 			return Err(ErrorKind::Custom("Not enough points in contous to form a spline".into()).into());
 		};
 
@@ -288,8 +300,8 @@ impl<'a> SplineIter<'a> {
 			return Err(ErrorKind::Custom("Iterator returned invalid point sequence".into()).into());
 		}
 
-		self.last_point = Some(point);
-		self.first_point = Some(point);
+		self.last_point = Some(IndexedGlyphPoint { point, index });
+		self.first_point = Some(IndexedGlyphPoint { point, index });
 
 		Ok(())
 	}
@@ -300,9 +312,15 @@ impl<'a> SplineIter<'a> {
 		};
 
 		if let Some(final_control) = self.final_control {
-			Some(SplineElement::Bezier(last_point, final_control, self.first_point.unwrap()))
+			Some(SplineElement {
+				data: SplineElementData::Bezier(last_point, final_control, self.first_point.unwrap()),
+				is_last: true
+			})
 		} else {
-			Some(SplineElement::Line(last_point, self.first_point.unwrap()))
+			Some(SplineElement {
+				data: SplineElementData::Line(last_point, self.first_point.unwrap()),
+				is_last: true
+			})
 		}
 	}
 }
@@ -316,7 +334,7 @@ impl<'a> Iterator for SplineIter<'a> {
 			return None;
 		};
 
-		if last_point.is_endpoint {
+		if last_point.point.is_endpoint {
 			debug!("spline iter: point is an endpoint of contour. closing spline, starting new one (if possible)");
 			let result = self.handle_spline_close();
 			if let Err(err) = self.handle_spline_start() {
@@ -327,30 +345,36 @@ impl<'a> Iterator for SplineIter<'a> {
 			return result;
 		}
 
-		let Some(point) = self.points.next() else {
+		let Some((index, point)) = self.points.next() else {
 			self.last_point = None;
 			debug!("spline iter: no more points, closing spline");
 			return self.handle_spline_close();
 		};
 
 		if point.on_curve {
-			self.last_point = Some(point);
+			self.last_point = Some(IndexedGlyphPoint { point, index });
 			debug!("spline iter: point is on curve");
 
-			return Some(SplineElement::Line(last_point, point));
+			return Some(SplineElement {
+				data: SplineElementData::Line(last_point, IndexedGlyphPoint { point, index }),
+				is_last: false
+			});
 		} 
 
 		debug!("spline iter: point is control point");
 
-		let Some(next_point) = self.points.next() else {
+		let Some((next_index, next_point)) = self.points.next() else {
 			debug!("spline iter: no more data after control point, closing spline");
 			self.last_point = None;
 			return self.handle_spline_close();
 		};
 
 		debug!("spline iter: returning bezier");
-		self.last_point = Some(next_point);
-		Some(SplineElement::Bezier(last_point, point, next_point))
+		self.last_point = Some(IndexedGlyphPoint { point: next_point, index: next_index });
+		Some(SplineElement {
+			data: SplineElementData::Bezier(last_point, IndexedGlyphPoint { point, index }, IndexedGlyphPoint { point: next_point, index: next_index }),
+			is_last: false
+		})
 	}
 }
 
@@ -366,7 +390,7 @@ impl Glyph {
 
 	pub fn splines<'a>(&'a self) -> Result<SplineIter<'a>> {
 		let mut splines = SplineIter {
-			points: self.iter(),
+			points: self.iter().enumerate(),
 			last_point: None,
 			final_control: None,
 			first_point: None
diff --git a/server/src/lib.rs b/server/src/lib.rs
index f888591..fe7ded2 100644
--- a/server/src/lib.rs
+++ b/server/src/lib.rs
@@ -7,7 +7,7 @@ pub mod font;
 pub mod writer;
 
 pub use font::Font;
-pub use writer::SvgWriter;
+pub use writer::JsonWriter;
 
 pub fn init() -> Result<(), Box<dyn Error>> {
     TermLogger::init(
diff --git a/server/src/webview/main.rs b/server/src/webview/main.rs
index 10bfe09..5a046cb 100644
--- a/server/src/webview/main.rs
+++ b/server/src/webview/main.rs
@@ -2,7 +2,7 @@
 
 use std::{fs::File, future::Future, net::{IpAddr, Ipv4Addr}, sync::Mutex};
 
-use fontloader::{writer::Visitor, Font, SvgWriter};
+use fontloader::{writer::Visitor, JsonWriter, Font};
 use rocket::{fairing::{Fairing, Info, Kind}, http::Header, response::{content, status}, Config, State};
 
 struct CORS;
@@ -29,20 +29,20 @@ struct SharedFont {
 }
 
 #[get("/glyph/<glyph>")]
-fn get_glyph(font: &State<SharedFont>, glyph: &str) -> status::Accepted<content::RawHtml<String>> {
+fn get_glyph(font: &State<SharedFont>, glyph: &str) -> status::Accepted<content::RawJson<String>> {
 	let Some(char) = glyph.chars().next() else {
-		return status::Accepted(content::RawHtml("Please provide a char".into()));
+		return status::Accepted(content::RawJson("".into()));
 	};
 
 	let result = match font.font.lock().unwrap().get_data_for(char) {
 		Ok(result) => result,
-		Err(err) => return status::Accepted(content::RawHtml(err.to_string()))
+		Err(err) => return status::Accepted(content::RawJson(err.to_string()))
 	};
 
-	let mut svg_buf = vec![];
-	SvgWriter::new(&mut svg_buf).write(&result);
+	let mut json_buf = vec![];
+	JsonWriter::new(&mut json_buf).write(&result);
 
-	status::Accepted(content::RawHtml(String::from_utf8(svg_buf).unwrap()))
+	status::Accepted(content::RawJson(String::from_utf8(json_buf).unwrap()))
 }
 
 #[launch]
diff --git a/server/src/writer.rs b/server/src/writer.rs
index a2ef020..4fcc696 100644
--- a/server/src/writer.rs
+++ b/server/src/writer.rs
@@ -1,21 +1,27 @@
-mod svg;
+mod json;
 
 use crate::font::{Glyph, GlyphHeader, GlyphPoint, SplineElement};
 
 use log::debug;
-pub use svg::SvgWriter;
+pub use json::JsonWriter;
 
-pub trait Visitor {
+pub trait Visitor: Sized {
 	fn write_prefix(&mut self, header: &GlyphHeader);
-	fn write_point(&mut self, point: &SplineElement);
-	fn write_suffix(&mut self);
 
-	fn write(&mut self, glyph: &Glyph) {
+	fn write_point(&mut self, point: &GlyphPoint);
+	fn write_spline(&mut self, spline: &SplineElement);
+	fn write_suffix(self);
+
+	fn write(mut self, glyph: &Glyph) {
 		self.write_prefix(&glyph.header);
 
+		glyph.iter().for_each(|point| {
+			self.write_point(&point);
+		});
+
 		glyph.splines().unwrap().for_each(|spline_element| {
 			debug!("{spline_element:#?}");
-			self.write_point(&spline_element)
+			self.write_spline(&spline_element)
 		});
 
 		self.write_suffix();
diff --git a/server/src/writer/json.rs b/server/src/writer/json.rs
new file mode 100644
index 0000000..d98eb1c
--- /dev/null
+++ b/server/src/writer/json.rs
@@ -0,0 +1,103 @@
+use std::io::Write;
+
+use serde::Serialize;
+
+use crate::font::{GlyphHeader, GlyphPoint, SplineElement, SplineElementData};
+
+use super::Visitor;
+
+#[derive(Serialize)]
+enum ContourElement {
+	Line(usize, usize),
+	Bezier(usize, usize, usize)
+}
+
+#[derive(Serialize)]
+struct Contour {
+	points: Vec<GlyphPoint>,
+	elements: Vec<ContourElement>
+}
+
+#[derive(Serialize)]
+struct BoundingBox {
+	xmin: i16,
+	xmax: i16,
+	ymin: i16,
+	ymax: i16
+}
+
+#[derive(Serialize)]
+struct JsonData {
+	bounding_box: BoundingBox,
+	contours: Vec<Contour>
+	
+}
+
+pub struct JsonWriter<W: Sized + Write> {
+	writer: W,
+
+	index_correction: usize,
+	current_contour: usize,
+
+	body: JsonData
+}
+
+impl<W: Sized + Write> JsonWriter<W> {
+	pub fn new(writer: W) -> JsonWriter<W> {
+		JsonWriter {
+			writer,
+			index_correction: 0,
+			current_contour: 0,
+
+			body: JsonData {
+				bounding_box: BoundingBox { xmin: 0, xmax: 0, ymin: 0, ymax: 0 },
+				contours: vec![]
+			}
+		}
+	}
+}
+
+impl<W: Sized + Write> Visitor for JsonWriter<W> {
+	fn write_prefix(&mut self, header: &GlyphHeader) {
+		self.body.bounding_box = BoundingBox {
+			xmin: header.xmin,
+			xmax: header.xmax,
+			ymin: header.ymin,
+			ymax: header.ymax
+		};
+
+		self.body.contours.push(Contour {
+			points: vec![],
+			elements: vec![]
+		});
+	}
+
+	fn write_point(&mut self, point: &GlyphPoint) {
+		self.body.contours.last_mut().unwrap().points.push(*point);
+
+		if point.is_endpoint {
+			self.body.contours.push(Contour {
+				points: vec![],
+				elements: vec![]
+			})
+		}
+
+	}
+
+	fn write_spline(&mut self, spline: &SplineElement) {
+		let indexed_spline = match spline.data {
+			SplineElementData::Line(start, end) => ContourElement::Line(start.index - self.index_correction, end.index - self.index_correction),
+			SplineElementData::Bezier(start, control, end) => ContourElement::Bezier(start.index - self.index_correction, control.index - self.index_correction, end.index - self.index_correction)
+		};
+
+		self.body.contours[self.current_contour].elements.push(indexed_spline);
+		if spline.is_last {
+			self.index_correction = self.body.contours[self.current_contour].points.len();
+			self.current_contour += 1;
+		}
+	}
+
+	fn write_suffix(self) {
+		serde_json::to_writer(self.writer, &self.body);
+	}
+}
diff --git a/server/src/writer/svg.rs b/server/src/writer/svg.rs
deleted file mode 100644
index 2203863..0000000
--- a/server/src/writer/svg.rs
+++ /dev/null
@@ -1,105 +0,0 @@
-use std::{fs::File, io::{BufWriter, Write}};
-
-use crate::font::{GlyphHeader, GlyphPoint, SplineElement};
-
-use super::Visitor;
-
-pub struct SvgWriter<'a, W: Sized + Write> {
-	first_point: bool,
-
-	writer: &'a mut W,
-	points: Vec<(i32, i32)>,
-	control_points: Vec<(i32, i32)>,
-	virtual_points: Vec<(i32, i32)>
-}
-
-impl<'a, W: Sized + Write> SvgWriter<'a, W> {
-	pub fn new(out: &'a mut W) -> Self {
-		SvgWriter {
-			first_point: true,
-
-			writer: out,
-			points: vec![],
-			control_points: vec![],
-			virtual_points: vec![]
-		}
-	}
-}
-
-impl<'a, W: Sized + Write> SvgWriter<'a, W> {
-	fn handle_start_point(&mut self, point: &GlyphPoint) {
-		if self.first_point {
-			write!(self.writer, "M{} {} ", point.x, -point.y);
-			self.first_point = false;
-		}
-	}
-
-	fn handle_end_point(&mut self, point: &GlyphPoint) {
-		if point.is_endpoint {
-			self.first_point = true;
-		}
-	}
-
-	fn write_points(&mut self) {
-		for (x, y) in &self.points {
-			write!(self.writer, "<circle cx=\"{x}\" cy=\"{y}\" r=\"10\" fill=\"red\" />");
-		}
-
-		for (x, y) in &self.control_points {
-			write!(self.writer, "<circle cx=\"{x}\" cy=\"{y}\" r=\"10\" fill=\"blue\" />");
-		}
-
-		for (x, y) in &self.virtual_points {
-			write!(self.writer, "<circle cx=\"{x}\" cy=\"{y}\" r=\"10\" fill=\"green\" />");
-		}
-	}
-}
-
-impl<'a, W: Sized + Write> Visitor for SvgWriter<'a, W> {
-	fn write_prefix(&mut self, header: &GlyphHeader) {
-		write!(
-			self.writer,
-			"<svg width=\"1000\" height=\"1000\" viewBox=\"{} {} {} {}\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"",
-			header.xmin, -header.ymax,
-			header.xmax - header.xmin,
-			header.ymax - header.ymin
-		);
-	}
-
-	fn write_point(&mut self, point: &SplineElement) {
-		match point {
-			SplineElement::Line(start, end) => {
-				self.handle_start_point(start);
-				write!(self.writer, "L{} {} ", end.x, -end.y);
-
-				self.points.push((start.x, -start.y));
-				self.handle_end_point(start);
-			},
-
-			SplineElement::Bezier(start, control, end) => {
-				self.handle_start_point(start);
-				write!(self.writer, "Q{} {} {} {} ", control.x, -control.y, end.x, -end.y);
-
-				if start.is_virtual {
-					self.virtual_points.push((start.x, -start.y));
-				} else {
-					self.points.push((start.x, -start.y));
-				}
-
-				self.control_points.push((control.x, -control.y));
-				self.handle_end_point(start);
-			}
-		}
-	}
-
-	fn write_suffix(&mut self) {
-		write!(
-			self.writer,
-			"\" style=\"fill:none; stroke:black; stroke-width:3;\" />"
-		);
-
-		self.write_points();
-
-		write!(self.writer, "</svg>");
-	}
-}