diff --git a/redstring/templates/base.jinja b/redstring/templates/base.jinja
new file mode 100644
index 0000000..d34ef50
--- /dev/null
+++ b/redstring/templates/base.jinja
@@ -0,0 +1,104 @@
+<html>
+<head>
+<meta charset="UTF-8">
+<title>{{ page_title }}</title>
+<meta property="og:title" content="{{ page_title }}" />
+<meta property="og:type" content="website" />
+{% if page_summary -%}
+<meta property="og:description" content="{{ page_summary }}" />
+{% endif -%}
+<link rel="icon" href="data:;base64,=">
+<style>
+	/* Page structure */
+	body {
+		background-color: #000000;
+		margin: 0px;
+	}
+	div#wrapper {
+		background-color: #303030;
+		color: #ffffff;
+		max-width: 700px;
+		margin-left: auto;
+		margin-right: auto;
+		padding-top: 10px;
+	}
+
+	/* Tabs setup */
+	div.tab {
+		display: inline-block;
+		padding: 5px;
+		background-color: #303030;
+		border-style: solid;
+		border-color: #808080;
+		border-width: 2px 2px 0 2px;
+		border-radius: 10px 10px 0px 0px;
+		margin: 0 0 0 4px;
+		font-family: monospace;
+		font-weight: bold;
+		color: #808080;
+		cursor: pointer;
+		user-select: none
+	}
+	div.tab-selected {
+		background-color: #303030;
+		border-color: #b0b0b0;
+		color: #b0b0b0;
+		position: relative;
+		top: 2px;
+	}
+	div.tab-right {
+		float: right;
+		margin: 0 4px 0 0;
+	}
+	div.tab-content {
+		width: 100%;
+		border-top: 2px solid #b0b0b0;
+		display: none;
+	}
+	div.tab-selected-content {
+		display: block;
+		-padding: 5px;
+	}
+
+	/* Content tables */
+	table.content-table {
+		width: 100%;
+		color: #ffffff;
+		font-family: serif;
+		white-space: pre-wrap;
+		border-collapse: collapse;
+		overflow-wrap: break-word;
+		word-wrap: break-word;
+		-ms-word-break: break-all;
+		word-break: break-word;
+		-ms-hyphens: auto;
+		-moz-hyphens: auto;
+		-webkit-hyphens: auto;
+		hyphens: auto;
+	}
+	table.content-table tr {
+		border-bottom: 1px solid #808080;
+	}
+	table.content-table td {
+		padding: 5px;
+	}
+	table.content-table td:nth-child(1) {
+		width: 150px;
+		font-weight: bold;
+		vertical-align:top
+	}
+	table.content-table tr.hide-tag-name td:nth-child(1) {
+		display: none;
+	}
+	table.content-table td:nth-child(2) {
+		white-space: pre-wrap;
+	}
+</style>
+{% block page_scripts %}{% endblock %}
+</head>
+<body>
+<div id="wrapper">
+{% block page_content %}{% endblock %}
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/redstring/templates/doc.jinja b/redstring/templates/doc.jinja
new file mode 100644
index 0000000..c73cdf0
--- /dev/null
+++ b/redstring/templates/doc.jinja
@@ -0,0 +1,53 @@
+{% extends 'base.jinja' %}
+
+{% set page_title = 'tmp' -%}
+{% set page_summary = 'tmpp' %}
+
+{% block page_scripts %}
+<script>
+function selectTab(name) {
+	let tab = document.getElementById(name);
+	if (tab)
+	{
+		// Unselect all tabs and content
+		Array.from(document.getElementsByClassName("tab"))
+			.forEach(e => e.classList.remove("tab-selected"));
+		Array.from(document.getElementsByClassName("tab-content"))
+			.forEach(e => e.classList.remove("tab-selected-content"));
+			// Select the new tab and content
+		tab.classList.add("tab-selected");
+		let content = document.getElementById(name + "-content");
+		content.classList.add("tab-selected-content");
+	}
+}
+
+window.onload = function () {
+	// Respect fragment as a tab selector shortcut
+	if (window.location.hash) {
+		selectTab(window.location.hash.substring(1));
+	}
+}
+</script>
+{% endblock page_scripts %}
+
+{% macro make_tab(tab, selected) -%}
+<div id="{{ tab.name }}" class="tab{% if selected %} tab-selected{% endif %}" onclick="javascript:selectTab('{{ tab.name }}')">{{ tab.name }}</div>
+{%- endmacro %}
+
+{% macro make_tab_content(tab, selected) %}
+<div id="{{ tab.name }}-content" class="tab-content{% if selected %} tab-selected-content{% endif %}">
+<table id="{{ tab.name }}-content-table" class="content-table">
+{% for tag in tab %}
+<tr {% if tab.options.hide_names %}class="hide-tag-name"{% endif %}>
+<td>{{ tag.name }}</td>
+<td>{{ tag.value }}</td>
+</tr>
+{% endfor %}
+</table>
+</div>
+{% endmacro %}
+
+{% block page_content %}
+{% for tab in document %}{{ make_tab(tab, loop.first) }}{% endfor %}<a href="/index/"><div id="index" class="tab tab-right">index</div></a>
+{% for tab in document %}{{ make_tab_content(tab, loop.first) }}{% endfor %}
+{% endblock page_content %}
\ No newline at end of file
