This project serves a single static webpage that has several goals:
- Explain how the project works.
- Provide an easy way to create a serverless static page (or widget).
- Render a Base 64 encoded page.
No, it's not absolutely serverless: the page that does all the work needs to be hosted somewhere. However, once that page is online, you can use it to create any kind of page, without the requirement to host it anywhere: all the page source is stored in the fragment part of the URL (after the # sign).
Yes and no. Yes, in the sense the server will never know what page is generated from the encoded content: the fragment is never sent online. No, in the sense it can be used to display anything, including malicious forms to send data elsewhere.
Let's have several examples. The first one will be a very simple document with the content <h1>Hello!</h1>. Notice that the <h1>Hello!</h1> content has been encoded to PGgxPkhlbGxvITwvaDE+ in the address bar, after the #.
The second demo creates a complete page, with fully working Javascript (if that matters to you): second example, more complex with a Vega-Lite chart that is hosted nowhere.
If you are interested, here is the decoded source:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
</head>
<body>
<h1>Stacked Bar Chart</h1>
<p>This webpage with a stacked bar chart is generated completely in your browser. It lives exclusively in the
address bar of your browser, and isn't stored anywhere else.</p>
<div id="view"></div>
<script>
var spec = {
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": { "url": "https://vega.github.io/vega-lite/examples/data/seattle-weather.csv" },
"mark": "bar",
"encoding": {
"x": {
"timeUnit": "month",
"field": "date",
"type": "ordinal",
"title": "Month of the year"
},
"y": {
"aggregate": "count",
"type": "quantitative"
},
"color": {
"field": "weather",
"type": "nominal",
"scale": {
"domain": ["sun", "fog", "drizzle", "rain", "snow"],
"range": ["#e7ba52", "#c7c7c7", "#aec7e8", "#1f77b4", "#9467bd"]
},
"title": "Weather type"
}
}
};
vegaEmbed(
'#view',
spec
);
</script>
</body>
</html>It can be also used in <iframe> elements, for example in Atlassian's Confluence pages.