• Stars
    star
    312
  • Rank 134,133 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 11 years ago
  • Updated about 5 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

In-browser JSON editor

Hulk

Hulk is an in-browser JSON editor. View an example

Usage

$.hulk('#selector', {foo: "bar"}, function(data) {
    console.log("Here's the updated data: " + data);
});

Will insert the JSON editor into the div with id "selector". Generally ID's are preferred.

The third argument is a callback that will execute when the user presses "Save". Alternatively, you can retrieve the state of the world at any point by calling:

$.hulkSmash('#selector');

There are two CSS files, hulk.css and hulk-colors.css, which make the layout much more readable. Of course, you are happy to style the inputs however you desire.

Argument documentation

The $.hulk function takes the following arguments in this order:

  • selector (string) - Any valid jQuery selector. The input nodes will be inserted into the DOM based on the selector you give. This argument is required.

  • data (object) - Any valid JSON object. This will be serialized and splayed into the DOM. This argument is required.

  • callback (function) - When the user presses "Save" hulk will re-serialize the data and pass it as an argument to the function you provide. This argument is optional.

  • options (object) - A dictionary of optional settings for hulk. The possible options are outlined below. This argument is optional.

The $.hulkSmash function takes the following arguments in this order:

  • selector (string) - Any valid jQuery selector. The input nodes will be inserted into the DOM based on the selector you give. This argument is required.

  • options (object) - A dictionary of optional settings for hulk. The possible options are outlined below. This argument is optional.

Optional settings

These are options that you can pass to either $.hulk or $.hulkSmash.

  • separator (string) - Define a custom separator between keys and values. By default, the separator is "=>".

  • emptyString (string) - Serialize an empty text input field back into JSON using the empty string ("") instead of null. Defaults to false.

  • depth (int) - Collapse all dictionaries and lists that are nested deeper than depth. depth=0 will collapse everything. depth=-1 will expand everything. The default is to show all JSON.

  • smartParsing (boolean) - Try to parse text inputs into matching data types, eg turn the string "5.53" into the number 5.53 when serializing into JSON, and turn "true" into true. If set to false, all objects will be serialized as strings. The default is true.

  • showSaveButton (boolean) - Whether to show the "Save" button. The default is to show the button.

  • permissions (array of strings) - Define how customizable and editable the custom JSON dictionary is. For example, you may only want to update existing values, not add new objects. This takes a few different values

    • "all" - allow the user to edit everything. This is the default.
    • "values-only" - only allow the user to edit the leaf nodes. Keys cannot be added or modified.
    • "no-append" - User can edit keys and values, but can't add or delete nodes from the object.

Why?

Editing raw JSON is error-prone and not friendly to non-technical people. This makes it easy to edit and serialize JSON. This also makes it easy for a programmer and a non-technical user to collaborate.

We also use this tool internally at Twilio to edit configuration files.

Notes

  • Javascript objects do not maintain a sorted order. This means, when serializing an object from HTML to JSON, the keys will not be sorted. To maintain some semblance of order, keys are presented on the page in alphabetical order when serializing from JSON to HTML (this is something we can control). Consider sorting keys once they are received on the server or whichever sane language is dealing with your new JSON object.

  • There is inherent uncertainty in using text inputs for data entry. Does the entry "5.5" represent the number 5.5 or the string "5.5"? In this case we do some basic parsing.

    • if the value looks like a number, it's converted to a number
    • if the value looks like a boolean ("true" or "false"), it's converted to a boolean
    • if the value is empty, or the word "null", it's converted to the null value.

    That said, if you set the smartParsing option to false, all inputs will be serialized and returned as strings.

Installation

  1. Include the jQuery source on your page

  2. Include the hulk plugin.

  3. Call away

More Repositories

1

hamms

Malformed servers to test your HTTP client
Python
1,218
star
2

doony

UI Improvements for Jenkins
JavaScript
970
star
3

nacl

Pure Go implementation of the NaCL set of API's
Go
540
star
4

ssh_config

Go parser for ssh_config files
Go
386
star
5

go-bindata

A small utility which generates Go code from any file. Useful for embedding binary data in a Go program.
Go
330
star
6

sshpass

Mirror of http://sourceforge.net/projects/sshpass/
Shell
199
star
7

hostsfile

go tool for working with /etc/hosts files
Go
131
star
8

rct

Creating cool coasters for Roller Coaster Tycoon
Go
124
star
9

tecate

Figure out when your HTML is busted
JavaScript
110
star
10

customize-twitter-1.1

Add your own custom CSS to modify the Twitter Embeddable Widget
JavaScript
91
star
11

tss

Go port of moreutils/ts
Go
43
star
12

swish

Switch SSH settings between Github profiles
Go
38
star
13

travis

Command line client for interacting with Travis CI
Go
19
star
14

handlers

Useful HTTP middlewares
Go
19
star
15

gitopen

Open one of your remote URL's in your browser
Python
17
star
16

rest

Go REST helpers
Go
14
star
17

sll

Strip long lines from output
Go
14
star
18

multi-emailer

Send personalized email messages to multiple email accounts (e.g. City Council members)
Go
13
star
19

2013

Flat UI website redesign
HTML
12
star
20

differ

Go
12
star
21

read-mongo-logs

Tail Mongo database logs
Go
11
star
22

gitlab

Command line tool for waiting for Gitlab pipelines to complete
Go
11
star
23

ansible-go

Go
9
star
24

rct-rides

working with roller coaster tycoon saved ride format
Go
9
star
25

weirdfortune

the unix fortune program, now with weird twitter
Python
8
star
26

snapchat-friends

surprise, your friend network is public
Python
8
star
27

proto-make-example

Makefile
8
star
28

gobike

Go
6
star
29

ynab-go

YNAB Go Client, including a detailed age of money calculator
Go
6
star
30

write_mailmap

Easy generate an AUTHORS file from the Git commit history
Makefile
6
star
31

metrosolver

Finding optimal Mini Metro routes
6
star
32

google-oauth-handler

HTTP middleware for handling Google authentication
Go
5
star
33

targets

I am the next coming of John Carmack
C#
5
star
34

go-random-project-generator

Random project name generator (like Github or Heroku app names)
Go
5
star
35

twilio-jsonapi

A JSON convenience wrapper for the Twilio API
Python
4
star
36

godocdoc

Start godoc and open a HTTP server to the homepage
Go
4
star
37

isec2

Go library that reports whether you are running in EC2
Go
3
star
38

envdir

Go port of djb envdir
Go
3
star
39

vault-go

Better Hashicorp Vault client
Go
3
star
40

public-comments

I write letters to local governments and post them here
Go
3
star
41

clipper

API for retrieving Clipper Card data (and parsing Clipper Transactions)
Go
3
star
42

talks

Talks I give at conferences
3
star
43

goodmorningcmc

Python
2
star
44

circle-webhook

webhook server and JSON parser for circle ci webhooks
Go
2
star
45

gerrit-heroku

Attempting to run Gerrit on Heroku
Makefile
2
star
46

slides

Presentations
HTML
2
star
47

write_config_from_env

Pull env vars into a config file
Go
2
star
48

humanbench

Human-readable benchmark output
Go
2
star
49

tt

Better Node test runner
Go
2
star
50

jenkins

Open Jenkins urls from your command line
Python
2
star
51

haa

CA Housing Accountability Act Resources
2
star
52

stubhub-tickets

checking stubhub ticket prices
Python
2
star
53

tarbz2.com

Helping you remember which tar option to use.
ApacheConf
2
star
54

goose

Maintained fork of liamstask/goose that supports ALTER TYPE, CREATE INDEX CONCURRENTLY
Go
2
star
55

buildkite

Buildkite CLI tool
Go
2
star
56

chroma-markdown

Combined Markdown + syntax highlight HTML compiler
Go
2
star
57

gostdjs

The Go standard library, implemented in Javascript
JavaScript
1
star
58

old-county-road

JavaScript
1
star
59

generic-pool-timeout

JavaScript
1
star
60

oculus-rating-data

Working with Oculus rating data
Go
1
star
61

tarsnap-old-archives

Deleting old Tarsnap archives
Go
1
star
62

rustls-postgres

1
star
63

sample-html

sample html
1
star
64

local-servers

Making your local projects more browsable
Makefile
1
star
65

recompile

Concurrent recompilation of individual files (see README)
Go
1
star
66

Twilio-Python-quickstarts

Python quickstarts for Twilio
Python
1
star
67

flagr

Rearrange flags so the options come first
Go
1
star
68

delete-phone-numbers

Delete numbers from a Twilio account
Go
1
star
69

flot.selection.js

The Flot selection plugin, with draggable left/right edges
JavaScript
1
star
70

make

Go
1
star
71

javascript-ipython

ipython notebook for javascript
Shell
1
star
72

enable_pg_logs

Enable Postgres query logging
Go
1
star
73

ipv6-etc-hosts

Go
1
star
74

telapi-python

Tel API Python Helper Library
Python
1
star
75

lucifer

Hot, hot test reloading from Javascript
JavaScript
1
star
76

waterline-self-driving-car

1
star
77

newproject

1
star
78

bigtext

Go library to display text really big using Quicksilver on a Mac
Go
1
star
79

twilio_munischedule

Ruby
1
star