Welcome folks today in this blog post we will be building a json formatter or beautifier in browser using javascript.All the full source code of the application is shown below.

Get Started

In order to get started you need to make an index.html file and copy paste the following code

index.html

<div class="heading">{JSON} Formatter</div>

<div class="app">
  <div id="inputWrapper">
    <textarea class="input"></textarea>
  </div>

  <div id="result">
  </div>
</div>

<div class="heading">{JSON} Formatter</div>

</div>

</div>

Now make a style.css file and copy paste the following cod

style.css

@import url(https://fonts.googleapis.com/css?family=Roboto+Mono);

html, body{
  height: 100%;
  overflow: hidden;
}

* {
  box-sizing: border-box;
}

.app{
  display: flex;
  flex-direction: row;
  height: calc(100% - 75px);
}

#inputWrapper, #result{
  width: calc(100% - 10px);
  border: 1px solid #ececec;
  position: relative;
  margin: 15px 5px;
}

#result{
  overflow:auto;
  padding: 10px;
}

#inputWrapper:before, #result:before{
  content: "";
  position: absolute;
  width: 100%;
  box-shadow: 1px 3px 3px 1px #ececec;
  top:100%;
}

.input {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  resize: none;
  font-size: inherit;
  font-size: 1.2em;
  padding: 10px;
}


.heading{
  font-size: 2em;
  text-align: center;
  margin: 10px auto 15px auto;
  font-family: 'Roboto Mono', monospace;
}

.Node{
  font-size: 18px;
}

.KeyValue{
  position: relative;
  margin-left: 20px;
}
.KeyValueWrapper{
  transition: background-color 0.1s;
}

.KeyValueWrapperBG{
  background-color: rgba(0, 255, 0, 0.1);
}

.Key {
  font-size: 16px;
  color: #A0ECBE;
}

.PrimitiveValue{
  color: #3498DB;
}

.Separator{
  font-size: 12px;
  color: #999;
  margin: auto 3px auto 1px;
}

.ToggleButton{
    font-size: 9px;
    width: 13px;
    height: 13px;
    padding: 0;
    transform: translate(0, -2px);
    border: 1px solid paleturquoise;
    border-radius: 5px;
    margin-right: 3px;
    outline: none;
}

.TogglePlaceholder{
  display: none;
}

100

101

102

@import url(https://fonts.googleapis.com/css?family=Roboto+Mono);

html, body{

height: 100%;

overflow: hidden;

}

* {

box-sizing: border-box;

}

.app{

display: flex;

flex-direction: row;

height: calc(100% - 75px);

}

#inputWrapper, #result{

width: calc(100% - 10px);

border: 1px solid #ececec;

position: relative;

margin: 15px 5px;

}

#result{

overflow:auto;

padding: 10px;

}

#inputWrapper:before, #result:before{

content: "";

position: absolute;

width: 100%;

box-shadow: 1px 3px 3px 1px #ececec;

top:100%;

}

.input {

width: 100%;

height: 100%;

border: none;

outline: none;

resize: none;

font-size: inherit;

font-size: 1.2em;

padding: 10px;

}

.heading{

font-size: 2em;

text-align: center;

margin: 10px auto 15px auto;

font-family: 'Roboto Mono', monospace;

}

.Node{

font-size: 18px;

}

.KeyValue{

position: relative;

margin-left: 20px;

}

.KeyValueWrapper{

transition: background-color 0.1s;

}

.KeyValueWrapperBG{

background-color: rgba(0, 255, 0, 0.1);

}

.Key {

font-size: 16px;

color: #A0ECBE;

}

.PrimitiveValue{

color: #3498DB;

}

.Separator{

font-size: 12px;

color: #999;

margin: auto 3px auto 1px;

}

.ToggleButton{

font-size: 9px;

width: 13px;

height: 13px;

padding: 0;

transform: translate(0, -2px);

border: 1px solid paleturquoise;

border-radius: 5px;

margin-right: 3px;

outline: none;

}

.TogglePlaceholder{

display: none;

}

And now make a script.js file and copy paste the following code

script.js

var input = document.querySelector("#inputWrapper textarea")
var result = document.querySelector("#result")

function JSONPrettifier(input, output){
  this.input = input
  this.output = output
}

JSONPrettifier.prototype.emptyOutputContainer = function(){
  while(this.output.children.length){
    this.output.removeChild(this.output.firstChild)
  }
}

JSONPrettifier.prototype.setResult = function(message){
  console.log(message)
  this.emptyOutputContainer()
  this.output.appendChild(message)
}

JSONPrettifier.prototype.handleToggleClick = function(e){
  const level = Number(e.target.dataset.level)+1,
        KeyValueWrapper = document.querySelector(".KeyValueWrapper[data-level='"+level+"']"),
        TogglePlaceholder = document.querySelector(".TogglePlaceholder[data-level='"+ level +"']")
  if(KeyValueWrapper.style.display === "none"){
    KeyValueWrapper.style.display = "block"
    TogglePlaceholder.style.display = "none"
  } else{
    KeyValueWrapper.style.display = "none"
    TogglePlaceholder.style.display = "inline"
  }
}

JSONPrettifier.prototype.handleMouseEnter = function(e){
  let level = Number(e.target.dataset.level) + 1,
      KeyValueWrapper = document.querySelector(".KeyValueWrapper[data-level='"+level+"']")
  
  KeyValueWrapper.classList.add("KeyValueWrapperBG")
  while(--level > 0){
    KeyValueWrapper = document.querySelector(".KeyValueWrapper[data-level='"+level+"']")
    KeyValueWrapper.classList.remove("KeyValueWrapperBG")
  }
}

JSONPrettifier.prototype.handleMouseLeave = function(e){
  let level = Number(e.target.dataset.level) + 1,
        KeyValueWrapper = document.querySelector(".KeyValueWrapper[data-level='"+level+"']")
  
  KeyValueWrapper.classList.remove("KeyValueWrapperBG")
}

JSONPrettifier.prototype.createElement = function(type, level, value){
  if(type === "Node" || type === "KeyValue" || type === "KeyValueWrapper"){
    const div = document.createElement("div")
    div.setAttribute("class", type)
    div.setAttribute("data-level", level)
    if(type === "Node"){
      div.addEventListener("mouseenter", this.handleMouseEnter.bind(this))
      div.addEventListener("mouseleave", this.handleMouseLeave.bind(this))
    }
    return div
  }
  
  if(type === "NodeStart" || type === "NodeEnd"){
    const span = document.createElement("span")
    let value
    if(type === "NodeStart"){
      value = "{"
    }
    if(type === "NodeEnd"){
      value = "}"
    }
    const t = document.createTextNode(value)
    span.appendChild(t)
    span.setAttribute("class", type)
    span.setAttribute("data-level", level)
    return span
  }
  
  if(type === "PrimitiveValue" || type === "Key" || type === "Separator"){
    const span = document.createElement("span")
    const t = document.createTextNode(value)
    span.appendChild(t)
    span.setAttribute("class", type)
    span.setAttribute("data-level", level)
    return span
  }
  
  if(type === "Error"){
    const span = document.createElement("span")
    const t = document.createTextNode(level)
    span.appendChild(t)
    span.setAttribute("class", type)
    return span
  }
  
  if(type === "ToggleButton"){
    const button = document.createElement("button")
    const t = document.createTextNode("+")
    button.appendChild(t)
    button.setAttribute("data-level", level)
    button.setAttribute("class", type)
    button.addEventListener("click", this.handleToggleClick.bind(this))
    return button
  }
  if(type === "TogglePlaceholder"){
    const span = document.createElement("span")
    const t = document.createTextNode("...")
    span.appendChild(t)
    span.setAttribute("class", type)
    span.setAttribute("data-level", level)
    return span
  }
}

JSONPrettifier.prototype.process = function(json, level){
  if(typeof json !== "object"){
    return this.createElement("PrimitiveValue", level, json)
  }
  const parent = this.createElement("Node", level)
  parent.appendChild(this.createElement("ToggleButton", level))
  parent.appendChild(this.createElement("NodeStart", level))
  const KeyValueWrapper = this.createElement("KeyValueWrapper", level+1)
  for(key in json){
    const keyvalue = this.createElement("KeyValue", level+1)
    keyvalue.appendChild(this.createElement("Key", level+1, key))
    keyvalue.appendChild(this.createElement("Separator", level+1, ":"))
    keyvalue.appendChild(this.process(json[key], level + 1))
    KeyValueWrapper.appendChild(keyvalue)
  }
  parent.appendChild(KeyValueWrapper)
  parent.appendChild(this.createElement("TogglePlaceholder", level+1))
  parent.appendChild(this.createElement("NodeEnd", level))
  return parent
}

JSONPrettifier.prototype.listenChanges = function(e){
  this.startProcessing(e.target.value)
}

JSONPrettifier.prototype.startProcessing = function(text){
  var json = null
  try{
    json = JSON.parse(text)
  } catch(e){
    this.setResult(this.createElement("Error","Not valid json"))
  }
  
  if(json){
    this.setResult(this.process(json, 0))
  }
}

JSONPrettifier.prototype.init = function(initialObj){
  this.input.addEventListener("input", this.listenChanges.bind(this))
  if(initialObj){
    this.input.value = JSON.stringify(initialObj)
    this.startProcessing(JSON.stringify(initialObj))
  }
}


var jSONPrettifier = new JSONPrettifier(input, result)

jSONPrettifier.init({"foo":"bar","baz":{"bar":"foo", "yo": {"yay": "hey"}}})

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

var input = document.querySelector("#inputWrapper textarea")

var result = document.querySelector("#result")

function JSONPrettifier(input, output){

this.input = input

this.output = output

}

JSONPrettifier.prototype.emptyOutputContainer = function(){

while(this.output.children.length){

this.output.removeChild(this.output.firstChild)

}

JSONPrettifier.prototype.setResult = function(message){

console.log(message)

this.emptyOutputContainer()

this.output.appendChild(message)

}

JSONPrettifier.prototype.handleToggleClick = function(e){

const level = Number(e.target.dataset.level)+1,

KeyValueWrapper = document.querySelector(".KeyValueWrapper[data-level='"+level+"']"),

TogglePlaceholder = document.querySelector(".TogglePlaceholder[data-level='"+ level +"']")

if(KeyValueWrapper.style.display === "none"){

KeyValueWrapper.style.display = "block"

TogglePlaceholder.style.display = "none"

} else{

KeyValueWrapper.style.display = "none"

TogglePlaceholder.style.display = "inline"

}

JSONPrettifier.prototype.handleMouseEnter = function(e){

let level = Number(e.target.dataset.level) + 1,

KeyValueWrapper = document.querySelector(".KeyValueWrapper[data-level='"+level+"']")

KeyValueWrapper.classList.add("KeyValueWrapperBG")

while(--level > 0){

KeyValueWrapper = document.querySelector(".KeyValueWrapper[data-level='"+level+"']")

KeyValueWrapper.classList.remove("KeyValueWrapperBG")

}

JSONPrettifier.prototype.handleMouseLeave = function(e){

let level = Number(e.target.dataset.level) + 1,

KeyValueWrapper = document.querySelector(".KeyValueWrapper[data-level='"+level+"']")

KeyValueWrapper.classList.remove("KeyValueWrapperBG")

}

JSONPrettifier.prototype.createElement = function(type, level, value){

if(type === "Node" || type === "KeyValue" || type === "KeyValueWrapper"){

const div = document.createElement("div")

div.setAttribute("class", type)

div.setAttribute("data-level", level)

if(type === "Node"){

div.addEventListener("mouseenter", this.handleMouseEnter.bind(this))

div.addEventListener("mouseleave", this.handleMouseLeave.bind(this))

}

return div

}

if(type === "NodeStart" || type === "NodeEnd"){

const span = document.createElement("span")

let value

if(type === "NodeStart"){

value = "{"

}

if(type === "NodeEnd"){

value = "}"

}

const t = document.createTextNode(value)

span.appendChild(t)

span.setAttribute("class", type)

span.setAttribute("data-level", level)

return span

}

if(type === "PrimitiveValue" || type === "Key" || type === "Separator"){

const span = document.createElement("span")

const t = document.createTextNode(value)

span.appendChild(t)

span.setAttribute("class", type)

span.setAttribute("data-level", level)

return span

}

if(type === "Error"){

const span = document.createElement("span")

const t = document.createTextNode(level)

span.appendChild(t)

span.setAttribute("class", type)

return span

}

if(type === "ToggleButton"){

const button = document.createElement("button")

const t = document.createTextNode("+")

button.appendChild(t)

button.setAttribute("data-level", level)

button.setAttribute("class", type)

button.addEventListener("click", this.handleToggleClick.bind(this))

return button

}

if(type === "TogglePlaceholder"){

const span = document.createElement("span")

const t = document.createTextNode("...")

span.appendChild(t)

span.setAttribute("class", type)

span.setAttribute("data-level", level)

return span

}

JSONPrettifier.prototype.process = function(json, level){

if(typeof json !== "object"){

return this.createElement("PrimitiveValue", level, json)

}

const parent = this.createElement("Node", level)

parent.appendChild(this.createElement("ToggleButton", level))

parent.appendChild(this.createElement("NodeStart", level))

const KeyValueWrapper = this.createElement("KeyValueWrapper", level+1)

for(key in json){

const keyvalue = this.createElement("KeyValue", level+1)

keyvalue.appendChild(this.createElement("Key", level+1, key))

keyvalue.appendChild(this.createElement("Separator", level+1, ":"))

keyvalue.appendChild(this.process(json[key], level + 1))

KeyValueWrapper.appendChild(keyvalue)

}

parent.appendChild(KeyValueWrapper)

parent.appendChild(this.createElement("TogglePlaceholder", level+1))

parent.appendChild(this.createElement("NodeEnd", level))

return parent

}

JSONPrettifier.prototype.listenChanges = function(e){

this.startProcessing(e.target.value)

}

JSONPrettifier.prototype.startProcessing = function(text){

var json = null

try{

json = JSON.parse(text)

} catch(e){

this.setResult(this.createElement("Error","Not valid json"))

}

if(json){

this.setResult(this.process(json, 0))

}

JSONPrettifier.prototype.init = function(initialObj){

this.input.addEventListener("input", this.listenChanges.bind(this))

if(initialObj){

this.input.value = JSON.stringify(initialObj)

this.startProcessing(JSON.stringify(initialObj))

}

var jSONPrettifier = new JSONPrettifier(input, result)

jSONPrettifier.init({"foo":"bar","baz":{"bar":"foo", "yo": {"yay": "hey"}}})

And now if you open the index.html file inside the browser you will see the below screenshot

Build a JSON Formatter or Beautifier in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

Get Started

Leave a Reply Cancel reply

Get Started

Related posts:

You Might Also Like

Javascript Tutorial to Disable Text Selection or Copy Paste in HTML5 Input Field or TextArea

jsPDF Tutorial to Convert Two Tables with Headers with jspdf-autotable Library and Download it as PDF File

How to Get Youtube Video Thumbnail in Different Resolutions by Youtube URL or VideoID in Javascript Full Project For Beginners

Leave a Reply Cancel reply