Building a Beautiful JSON Visualizer with Flask, Bootstrap, and JavaScript
This guide walks you through installing Flask and Flask‑WTF, creating a Flask backend with routes and forms, designing Bootstrap‑styled HTML templates, adding custom JavaScript to render JSON as a tree, and running the application to view a polished online JSON visualizer.
Step 1: Install dependencies – Use pip install Flask Flask-WTF to add Flask for the web server and Flask‑WTF for form handling.
Step 2: Create the Flask application – Set up a project folder json_visualizer containing app.py , a templates directory with index.html , and a static folder for JavaScript and CSS files.
app.py
from flask import Flask, render_template, request
from flask_wtf import FlaskForm
from wtforms import TextAreaField, SubmitField
from wtforms.validators import DataRequired
import json
app = Flask(__name__)
app.config['SECRET_KEY'] = 'your_secret_key'
class JsonForm(FlaskForm):
json_data = TextAreaField('JSON 数据', validators=[DataRequired()])
submit = SubmitField('可视化')
@app.route('/', methods=['GET', 'POST'])
def index():
form = JsonForm()
json_data = None
if form.validate_on_submit():
try:
json_data = json.loads(form.json_data.data)
except json.JSONDecodeError:
form.json_data.errors.append('无效的 JSON 数据')
return render_template('index.html', form=form, json_data=json_data)
if __name__ == '__main__':
app.run(debug=True)templates/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON 可视化工具</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
<div class="container mt-5">
<h1>JSON 可视化工具</h1>
<form method="POST">
{{ form.hidden_tag() }}
<div>
<label for="json_data">{{ form.json_data.label }}</label>
<textarea id="json_data" rows="10" name="json_data">{{ form.json_data.data }}</textarea>
{% for error in form.json_data.errors %}
<div>{{ error }}</div>
{% endfor %}
</div>
<button type="submit" class="btn btn-primary">{{ form.submit.label }}</button>
</form>
{% if json_data %}
<div id="json_tree" class="mt-4 p-4 border rounded bg-white shadow">
<h5>JSON 可视化</h5>
<div id="json_tree_content"></div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="{{ url_for('static', filename='js/json_visualizer.js') }}"></script>
<script>
$(document).ready(function() {
createJsonTree({{ json_data | tojson }}, '#json_tree_content');
});
</script>
{% endif %}
</div>
</body>
</html>static/js/json_visualizer.js
function createJsonTree(json, selector) {
function buildTree(node, level = 0) {
let indent = ' '.repeat(level * 2);
let $ul = $('
');
for (let key in node) {
let value = node[key];
let $li = $('
');
if (typeof value === 'object' && value !== null) {
$li.text(indent + key + ':');
$li.append(buildTree(value, level + 1));
} else {
$li.text(indent + key + ': ' + JSON.stringify(value));
}
$ul.append($li);
}
return $ul;
}
$(selector).html(buildTree(json));
}static/css/style.css
body { background-color: #f8f9fa; }
.container { max-width: 800px; }
#json_tree { background-color: #fff; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); overflow: hidden; }
#json_tree h5 { font-size: 1.25rem; margin-bottom: 1rem; border-bottom: 1px solid #ddd; padding-bottom: 0.5rem; }
.json-tree { list-style-type: none; padding-left: 20px; }
.json-tree-item { margin-bottom: 0.5rem; font-family: 'Courier New', Courier, monospace; color: #333; }
.json-tree-item span { color: #007bff; }Step 3: Run the application – Navigate to the json_visualizer directory and execute python app.py . Open a browser at http://127.0.0.1:5000/ , paste JSON data, and click the “可视化” button to see a styled tree view.
Conclusion – By combining Flask for the backend, Bootstrap for styling, and custom JavaScript for rendering, you obtain a clean, user‑friendly online JSON visualizer that can be extended or customized as needed.
Test Development Learning Exchange
Test Development Learning Exchange
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.