Show HN: This website is valid JSON
Here&#x27;s the page source:<p>```html<p><pre><code>  {
      &quot;#info&quot;: {
          &quot;title&quot;: &quot;WDR&quot;
      },
      &quot;subtitle&quot;: &quot;Web Data Render&quot;,
      &quot;title&quot;: &quot;# WDR&quot;,
      &quot;what&quot;: {
          &quot;title&quot; : &quot;## What is WDR?&quot;,
          &quot;description&quot;: [
              &quot;This website is a valid **[JSON](&#x2F;&#x2F;www.json.org&#x2F;)**!&quot;,
              &quot;Check the source code. Instead of the habitual HTML and CSS, you will see just a plain JSON with the website&#x27;s information.&quot;,
              &quot;WDR is a format to separate the website&#x27;s **information** and **design**.&quot;,
              &quot;The website is readily available to be consumed outside the browser via JSON, but also still presentable to users accessing through the web browser.&quot;
          ]
      },
      &quot;subscribe&quot;: &quot;I&#x27;m creating a **blog platform** using this concept. Follow me on [Twitter](&#x2F;&#x2F;twitter.com&#x2F;gpiresnt) to be notified when is ready! &quot;,
      &quot;how&quot;: {
          &quot;title&quot;: &quot;## How it works&quot;,
          &quot;description&quot;: [
              &quot;It works by embedding a small initiator at the end of the JSON file.&quot;,
              &quot;For example, this is a valid JSON and web page:&quot;,
              &quot;```{\n  \&quot;title\&quot;: \&quot;Example Page\&quot;,\n  \&quot;description\&quot;: \&quot;This is an example.\&quot;,\n  \&quot;#render\&quot;: \&quot;&amp;lt;html hidden&amp;gt;&amp;lt;script src=&#x2F;render.js&amp;gt;&amp;lt;&#x2F;script&amp;gt;&amp;lt;&#x2F;html&amp;gt;\&quot;\n}```&quot;,
              &quot;The script `render.js` receives the JSON as input and is responsible to render the page.&quot;
          ]
      },
      &quot;usage&quot;: {
          &quot;title&quot;: &quot;## Usage&quot;,
          &quot;description&quot;: [
              &quot;First create an HTML file with the JSON information:&quot;,
              &quot;```{\n  \&quot;title\&quot;: \&quot;Example Page\&quot;,\n  \&quot;description\&quot;: \&quot;This is an example.\&quot;\n}```&quot;,
              &quot;Include the initiator at the bottom:&quot;,
              &quot;```{\n  \&quot;title\&quot;: \&quot;Example Page\&quot;,\n  \&quot;description\&quot;: \&quot;This is an example.\&quot;,\n  \&quot;#render\&quot;: \&quot;&amp;lt;html hidden&amp;gt;&amp;lt;meta charset=utf-8&amp;gt;&amp;lt;script src=&#x2F;render.js&amp;gt;&amp;lt;&#x2F;script&amp;gt;&amp;lt;&#x2F;html&amp;gt;\&quot;\n}```&quot;,
              &quot;The next section explains how to create the `render.js`.&quot;
          ]
      },
      &quot;only-data&quot;: {
          &quot;title&quot;: &quot;** Pure information **&quot;,
          &quot;description&quot;: [
              &quot;The JSON must contain only pure information without any concern about design or markup. All the design and markup required to render the page must be inside the rendering script.&quot;
          ]
      },
      &quot;create-render&quot;: {
          &quot;title&quot;: &quot;## Creating a render&quot;,
          &quot;description&quot;: [
              &quot;Create a new javascript project and install the package `wdr-loader`:&quot;,
              &quot;```npm install wdr-loader```&quot;,
              &quot;Call the `loader` function to retrieve the JSON:&quot;,
              &quot;```import loader from &#x27;wdr-loader&#x27;;\nloader(data =&gt; render(data));```&quot;,

              &quot;Create a `render` function to handle the data and render the HTML. Below is an example using simple `innerHTML`:&quot;,

              &quot;```function render(data) {\n    document.head.innerHTML = `\n      &amp;lt;meta charset=\&quot;utf-8\&quot;&amp;gt;\n      &amp;lt;meta name=\&quot;viewport\&quot; content=\&quot;width=device-width, initial-scale=1\&quot; &#x2F;&amp;gt;\n      &amp;lt;title&amp;gt;${data.title}&amp;lt;&#x2F;title&amp;gt;`;\n\n    document.body.innerHTML = `\n      &amp;lt;section&amp;gt;\n        &amp;lt;h1&amp;gt;${data.title}&amp;lt;&#x2F;h1&amp;gt;\n        &amp;lt;p&amp;gt;${data.description}&amp;lt;p&amp;gt;\n      &amp;lt;&#x2F;section&amp;gt;`;\n}```&quot;,

              &quot;The `wdr-loader` code is available on [GitHub](&#x2F;&#x2F;github.com&#x2F;webdatarender&#x2F;wdr-loader) with an example.&quot;
          ]
      },
      &quot;basic-render&quot;: {
          &quot;title&quot;: &quot;## Basic render&quot;,
          &quot;description&quot;: [
              &quot;If you don&#x27;t want to create a render right now, it is available a basic render (used on this very website) to immediate use:&quot;
          ],
          &quot;download&quot;: &quot;[render-basic-1.0.3.js](&#x2F;&#x2F;webdatarender.com&#x2F;dist&#x2F;render-basic-1.0.3.js)&quot;,
          &quot;instructions&quot;: [
              &quot;Just download the script and include it on the initiator directly:&quot;,
              &quot;```{\n  \&quot;title\&quot;: \&quot;# Example Page\&quot;,\n  \&quot;description\&quot;: \&quot;This is an example.\&quot;,\n  \&quot;#render\&quot;: \&quot;&amp;lt;html hidden&amp;gt;&amp;lt;meta charset=utf-8&amp;gt;&amp;lt;script src=&#x2F;render-basic-1.0.3.js&amp;gt;&amp;lt;&#x2F;script&amp;gt;&amp;lt;&#x2F;html&amp;gt;\&quot;\n}```&quot;,
              &quot;The code is available on [GitHub](&#x2F;&#x2F;github.com&#x2F;webdatarender&#x2F;wdr-render-basic).&quot;
          ]
      },
      &quot;remarks&quot;: {
          &quot;title&quot;: &quot;## Remarks&quot;,
          &quot;description&quot;: [
              &quot;• The page is rendered in [quirks mode](&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;HTML&#x2F;Quirks_Mode_and_Standards_Mode) and can present some layout differences on different browsers.&quot;,
              &quot;• Although javascript is necessary to render the page, most search engines, like [Google](https:&#x2F;&#x2F;developers.google.com&#x2F;speed&#x2F;pagespeed&#x2F;insights&#x2F;?url=webdatarender.com) or [Bing](https:&#x2F;&#x2F;www.bing.com&#x2F;webmaster&#x2F;tools&#x2F;mobile-friendliness), will be able to read the page correctly.&quot;,
              &quot;• If you want to display the JSON for users that have javascript disabled, you can include `noscript` at the initiator: ```&amp;#x3C;noscript&amp;#x3E;&amp;#x3C;style&amp;#x3E;html{display:block !important; white-space:pre}&amp;#x3C;&#x2F;style&amp;#x3E;&amp;#x3C;&#x2F;noscript&amp;#x3E;```&quot;
          ]
      },
      &quot;support&quot;: {
          &quot;title&quot;: &quot;## Need Help? &quot;,
          &quot;description&quot;: &quot;If you need help, have any feedback or just want to say hi, send me an [email](mailto:gpiresnt@gmail.com).&quot;
      },
      &quot;about&quot;: {
          &quot;creator&quot;: &quot;Created by [@gpiresnt](&#x2F;&#x2F;twitter.com&#x2F;gpiresnt)&quot;,
          &quot;logo&quot;: &quot;![logo](&#x2F;img&#x2F;logo.png)&quot;
      },
      &quot;#render&quot;: {
          &quot;_&quot;: &quot;&lt;html hidden&gt;&lt;meta charset=utf-8&gt;&lt;script src=&#x2F;dist&#x2F;render-basic-1.0.3.js&gt;&lt;&#x2F;script&gt;&lt;&#x2F;html&gt;&lt;noscript&gt;&lt;style&gt;html{display:block !important; white-space:pre}&lt;&#x2F;style&gt;&lt;&#x2F;noscript&gt;&quot;,
          &quot;css&quot;: &quot;css&#x2F;main.css&quot;
      }
  }
</code></pre>
```