Codelab Editor
Free Online HTML Editor
Run
Learn JSON
<!DOCTYPE html> <html> <head> <style> body { padding: 10px; background: #fafafa; } .output-box { display: none; max-width: 500px; padding: 16px; border: 1px solid #ccc; border-radius: 12px; background-color: #f1f1f1; font-family: sans-serif; margin-top: 20px; white-space: pre-wrap; } button { margin-right: 10px; padding: 8px 16px; border: none; background-color: #007acc; color: white; border-radius: 6px; cursor: pointer; } button:hover { background-color: #005f99; } </style> </head> <body> <h2>Serialize JavaScript Array</h2> <p>Click the button to convert a JavaScript array into a JSON string using <kbd>JSON.stringify()</kbd>.</p> <button onclick="convertArray()">Stringify Array</button> <div class="output-box" id="outputBox"> <h3>JSON String Output</h3> <div id="jsonOutput"></div> </div> <script> function convertArray() { const users = ["Bob", "Alice", "John"]; const jsonString = JSON.stringify(users, null, 2); document.getElementById('jsonOutput').textContent = jsonString; document.getElementById('outputBox').style.display = 'block'; } </script> </body> </html>
Editor Commands
Ctrl
F
Find
Ctrl
G
Find Next
Ctrl
⇧
G
Find Previous
Ctrl
⇧
F
Find & Replace
Ctrl
]
Indent Code Right
Ctrl
[
Indent Code Left
⇧
Tab
Auto Indent Code
Ctrl
/
Line Comment
Ctrl
Alt
/
Block Comment
TutsInsider Actions
Alt
S
Run Code
Ctrl
C
Copy Editor Code
Ctrl
A
Select All Editor Code
Ctrl
S
Save/Download
Ctrl
Alt
X
Rotate
Ctrl
Alt
T
Switch Theme
Ctrl
⇧
C
Open Console
Esc
Close Console