Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Beta of a completely new JSONEditor available now 🎉 #1223

Closed
14 tasks done
josdejong opened this issue Jan 20, 2021 · 197 comments
Closed
14 tasks done

Beta of a completely new JSONEditor available now 🎉 #1223

josdejong opened this issue Jan 20, 2021 · 197 comments

Comments

@josdejong
Copy link
Owner

josdejong commented Jan 20, 2021

TLDR; please try out the new beta https://jsoneditoronline.org/beta/ and let me know what you think!

The first JSONEditor was published on 2011-11-28, more than nine years ago. Over the years, it did grow into a powerful, battle-tested tool. However, the codebase has become hard to maintain, and the architecture needed a big overhaul. I also felt like there is room to make the experience of editing your JSON data even better. The current editor contains two complementing modes: tree and code. This split has always felt like a non-optimal solution to me. Over the years I've been searching and experimenting with different solutions to improve on this.

I'm happy to present the first beta of a completely new editor, offering a totally new experience of editing JSON. The two separate modes (code and tree) are replaced with a new, unified solution which feels like working with a spreadsheet. Typical operations like inserting new fields or removing some have become easier now. You can copy/paste data via the system clipboard, making it frictionless to exchange data with other applications. The new editor can open and edit large JSON documents up to 500 MB without breaking a sweat. Under the hood, all editing you do is described and processed as JSON Patch operations, making it possible in the future to do cool stuff like keeping multiple editors in sync via atomic patch operations. And thanks to the new codebase it will be easier to make the editor more pluggable and customizable.

The editor is created in Svelte, but is a standalone UI component which can be used anywhere: in plain JavaScript, React, Vue, Angular, or your favorite framework. The editor is created and published as a new library with its own repository, since the changes are too big to see this as a major release of the existing library. You can find the new library at https://github.com/josdejong/svelte-jsoneditor/. Please be aware that the API is not yet stable and may change in the coming releases.

Please try out the new beta, and let me know what you think:

https://jsoneditoronline.org/beta/

Known limitations in this beta:

  • The editor still misses a lot of features that where available before: color picker, timestamp tag, dropdown for enums of your JSON Schema
  • Dragging selected contents up or down is not yet supported.
  • In the web application it is not yet possible to save a document without indentation when using tree mode.

Important questions to me are:

  • How do you like the new experience?
  • Do you prefer the new editor over the old one? If not, why?
  • Do you miss the old, low level code mode? If so, in what circumstances?
  • Are there things in the new editor that work clunky or cumbersome?

I really need your feedbacks here, thanks!

Feedback summary

Based on the feedbacks I've created action points:

  • Implement code mode
  • Add expand/collapse all buttons
    • Those buttons are added again
  • Quickkeys are not working on Mac: pasting doesn't work at all, other keys work with Control+... instead of Command+....
  • It is unclear how to use the editor the first time.
    • create a tutorial of some sort?
  • A common mistake is going into edit mode (blinking caret and border), and then paste JSON contents.
  • We miss the code mode: format/compact, and just being able to edit the raw JSON
    • I will add the code mode again, this will address a large part of the feedbacks
  • I miss being able to quickly get an idea of how large my document is (from number of lines, scrollbar, number of bytes)
    • having code mode back solves this, and we could also think though showing useful information in a status bar at the bottom
  • It is harder to copy a part of a value now (first double click to go in edit mode, then select the right part of the value)
    • Won't fix: this is a consequence of the changed UX, which has many pros but also cons (like this one)
  • The new editor is somewhat slower when expanding a large file
    • Profile the performance and see if improvements can be made
  • Be able to Transform either using JMESPath OR Lodash
  • Implement navigation path (breadcrumbs) on top again in tree mode
@josdejong josdejong pinned this issue Jan 20, 2021
@josdejong josdejong mentioned this issue Jan 20, 2021
23 tasks
@josdejong josdejong changed the title Beta of completely new JSONEditor available now 🎉 Beta of a completely new JSONEditor available now 🎉 Jan 20, 2021
@rtp4jc
Copy link

rtp4jc commented Jan 20, 2021

I just checked out the beta and had a couple of first impressions:

  • I liked the cleaner interface
  • The unified editor is good, but at first I didn't understand how to put my JSON in. After a couple seconds I did ctrl+a and then pasted which worked great, but it just wasn't super intuitive.
  • I couldn't find a expand all/collapse all button, so if that isn't there, I'd love for that to come back!
  • Sometimes I do like having the raw JSON show so I know how big the JSON is overall. I usually copy from a source that doesn't show the full value, so I gauge whether I copied a good example based on the size of the raw text. I'm sure I'll get used to not having that, but I did use it.

I'll probably stick with the old version until there is an expand/collapse all option since I use that all the time, but I think you're going in the right direction! I've used this editor for over a year and a half now and I love it. Keep up the great work!

@josdejong
Copy link
Owner Author

Thanks a lot @rtp4jc for your constructive feedback, this is really helpful!

  • I'll think through how to better inform first-time users how to use the editor, good point

  • I'll consider adding expand/collapse buttons to the menu again, it can be handy indeed (FYI: you can do Ctrl+Click on the expand button of a node to expand recursively)

  • About the code mode ("raw JSON"): do I understand you correctly that you used it to see the size of the JSON? As in: kilobytes, or lines of code or so? There may be alternative solutions to address those needs.

    My developer gut feeling also says like "I just want be able to see the raw JSON". In practice though, I myself haven't really needed code mode anymore. I want to better understand concrete use cases, where the raw JSON editor (code mode) is still handier or even necessary, so I can to better understand whether we still need it or not.

@rtp4jc
Copy link

rtp4jc commented Jan 20, 2021

Ah! The recursive expansion feature is cool! I definitely will use that on top of the expand all.

About the code mode, I generally just look at the number of lines/length of the scroll bar to get an intuitive feeling for how large the JSON is. It's nothing I would say is "make or break" for me, but it's a shift from what I'm used to. I'm totally fine with moving away from that style and I think most users would be fine without it, but I could see how older developers who are used to the raw display and new developers who are learning more of the syntax of JSON might like to have that feature as well.

I think a tutorial for first-time visitors would be cool. However, one thing I just thought of was maybe adding a cheat-sheet style modal that tells you shortcuts you can use that could help people find the Ctrl+Click expand.

@certabitmh
Copy link

I really miss the code / tree mode switch , since I often used it combined with switching between indented and compact json format. Used this i.e. for editing / generating json test data.

@FortTell
Copy link

The new editor makes small edits/copying part of value cumbersome.
In the new interface you have to doubleclick the entry first, and then make another click on the exact part of the value you want to edit.

Also copying data from the old editor to the new makes the data a single string with /n inserted everywhere if the copied data was not a valid json (Probably justified, but also annoying).

@vlad-ciorba
Copy link

I very miss the "code mode" with "format JSON data" option - this is what I used the most.
"tree mode" doesn't have the expand/collapse options anymore
New popup animations are annoying...

Up until now, it's harder to work with the new version.

@gauravphoenix
Copy link

I couldn't find a expand all/collapse all button, so if that isn't there, I'd love for that to come back!

Same here, I use that feature all the time so I can't use the beta yet

@TheJaysH
Copy link

Love the new design, layout is really clean! However much like others have said it's not initially intuitive. For myself I like to just write JSON text. I cant seem to be able to edit is as just raw JSON.

@haribaskarvr
Copy link

The new Editor interface is good. But, we would definitely need the JSON format data & compact JSON data which was very very useful. Kindly include that as well in the new Interface.

@dragosiordachioaia
Copy link

dragosiordachioaia commented Jan 22, 2021

Like others have said, the old view had the option to edit raw json in formatted/compact mode, which is now missing. Without that, I can't use the app. Other than that, the new interface is indeed prettier. Also, pasting JSON doesn't seem to work.

@shaharukhs
Copy link

Please add code/tree mode,

@simsam7
Copy link

simsam7 commented Jan 22, 2021

I love that you're not just leaving the code to become stale, and I think Svelte is very cool so it's awesome that you've used it in your rewrite. I also appreciate that it can now handle much larger datasets, thank you!

I do miss the ability to view the raw JSON, it's always the first thing I do, and then only in some cases do I switch to the Code view. It's far easier to look through JSON when it's nicely formatted and everything is visible at once to get a better understanding of the structure of the data, especially when you're working with JSON that you did not create yourself.

The ability to toggle between the compact vs nicely formatted view is also very important to me and I would likely start using another tool if that's not available (or clone your old code before it goes away and run it locally). I often get large JSON files to view that are in a compact layout, and then I use your tool to expand it, review it and then send it back in compact format again.

I've just tried editing an existing JSON file to quickly paste in a new section, and I can't get it to work properly. This is where the RAW JSON option worked exceptionally well. The new version is unusable to truly use like an editor to quickly reformat, add, check and recompress JSON.

@mabdsalam12
Copy link

After I know about https://jsoneditoronline.org I recommend this to many people. Also I use this. But if text to json converter not available then I have to find new. other option is nice.

@george-hawkins
Copy link

I'm happy to present the first beta of a completely new editor, offering a totally new experience of editing JSON.

Sorry but I'm going to say that I think sometimes one can overthink things. I think for most people, editing JSON is just something they do occasionally - and they want to be able to map common ways of editing and working with data onto what they do with JSON. I.e. it's not something so fundamental to them that they've ever thought "hey, what I need is a totally new way to think about how I work with JSON!"

Back when UIs were new, one often saw such domain-specific thinking. Someone who worked on e.g. a paint application might think "wouldn't it be much better if scrollbars worked like x" where x was some completely non-standard way for scrollbars to work. And they might have been right for that particular domain if people were prepared to overcome the initial oddness.

But on the whole, people want to be able to map their existing ways of thinking about things to situations where they're doing something similar, whether it's working with scrollbars or editing data (JSON or otherwise). I think you've maybe overthought this and for you, the changes, that you've made, make so much sense that they seem obvious and are clearly the best way to do things.

If I was spending many hours working with JSON, I might find it worth overcoming the initial oddness of the new approach. But I'd have to be convinced that this oddness was worth it. At the moment though, I used you Beta for about a minute and my initial reaction was "I've got no idea what's going on here" and nothing to encourage me to think that it's maybe worth my time to work it out. My existing editing model, which I have in my head, didn't apply, I found the experience frustrating and quickly switched back to the traditional approach.

I know it can be very disheartening to hear something like this when one has invested so much effort in rebuilding something. But I think you've got to ask yourself "have I just built something that works for me?" I can imagine that you could justify each little refinement, that you made in reaching the current situation, according to the evolving model you've developed of how JSON editing should work. But I suspect you may have thought so long about this problem that your model of how things should work has diverged too far from how those, who haven't made the same journey, think.

@josdejong
Copy link
Owner Author

@FortTell thanks these are some very good points, thanks. I do not know a solution right away to make it easy to copy a part of a value without extra effort, will keep this in mind.

Also copying data from the old editor to the new makes the data a single string with /n inserted everywhere if the copied data was not a valid json (Probably justified, but also annoying).

Data should be inserted as JSON, not as a string with escaped \n characters etc. When you paste JSON on top of a value, or on an insert area (blue line) between two lines, it should work. Only when you paste it on top of a key it will be pasted as stringified JSON. Can you give it one more try?

@josdejong
Copy link
Owner Author

@vlad-ciorba Thanks you're not the only one missing the code mode!

Can you explain what you mean with "New popup animations are annoying..."?

@josdejong
Copy link
Owner Author

@dragosiordachioaia @simsam7 pasting JSON should work: just copy some JSON from somewhere, click in the editor on a value or in between two lines, click Ctrl+V to paste). What browser are you using, and how are you trying to paste JSON? Does copy/paste work when pasting a value or a couple of lines inside the editor itself?

@josdejong
Copy link
Owner Author

josdejong commented Jan 23, 2021

@george-hawkins sorry to hear your initial experience wasn't smooth. Thanks for your feedback, that is helpful.

This isn't a "revolutionary" new experience in general or so, but I think a large improvement over the old "tree" mode, making it more enjoyable to use in general. In the "tree" mode I found it quite cumbersome myself to insert data or delete something (all has to be done via the context menu on the left side of every node, requiring a couple of clicks). It was this much cumbersome that I found myself often switching to the simple and flexible "code" mode instead to get stuff done.

The new editor (replacing the old "tree" mode), is much closer to how you work with a plain text/code editor and how you work in a spreadsheet, so it should not feel very alien to use ;). The idea is that you can just select some text, or put your "cursor" somewhere in between a line or replacing a key/value, then just type, use arrow keys to move around in your document, and use cut/copy/paste like you do in almost any application. Edit your JSON without having to worry about the double quotes, commas, and colons everywhere. I hope that this new editor will allow you to be more productive than in the old "tree" mode. At least for myself, I feel much less often the need to switch to the "code" mode. Seen all the feedbacks I'm strongly thinking about adding the code mode again though (so basically we would have a renewed "tree" mode only).

Seen the feedbacks, I think the new editor has a discoverability problem. You're not the only one reporting to have no idea how to use it. So I think I'll create a tutorial or introductory movie or something explaining the basics.

George you would help me a lot giving some feedback on what kind of actions where initially unclear to you: was it unclear how to get your document loaded in the editor? Unclear how to delete some data, or insert some new data? Unclear how to change a value? Etc.

EDIT: so, if I read you correctly, for you just the raw "code" mode is enough for you.

@josdejong
Copy link
Owner Author

Thanks for all the constructive feedbacks!

Many people mention the missing expand/collapse buttons, I will add those again, that's a good idea.

Also almost everyone mentions missing the code mode, especially because of the format/compact buttons. I'm strongly thinking about adding the code mode again.

People also mention that it's unclear how to use the editor the first time. I think it will be helpful to have some kind of tutorial or introduction. Can you please let me know what was unclear to use the first time? For example:

  • was it unclear how to get your JSON into the editor?
  • unclear how to delete some data, or insert some new data?
  • unclear how to change a value?
  • etc.

@FortTell
Copy link

Data should be inserted as JSON, not as a string with escaped \n characters etc. When you paste JSON on top of a value, or on an insert area (blue line) between two lines, it should work. Only when you paste it on top of a key it will be pasted as stringified JSON. Can you give it one more try?

I gave it a try. All test were performed by pasting the content into a completely blank window in the new interface.

  1. Valid JSON {"a":1}. Becomes valid JSON, OK.
  2. JSON with missing closing bracket {"a":1. Bracket inserted automatically, becomes valid JSON, OK.
  3. JSON with missing leading bracket "a": 1}. Becomes a JSON-string.
  4. JSON with missing inner bracket { "a":[1,2} -> bracket inserted, JSON. { "a":1,2]} - JSON-string.
  5. JSON with unclosed field {"a:1}. JSON-string

Clearly the parser can guess the missing closing brackets, but not the leading ones. It does not really look like a problem, more a design decision to guarantee the content is always a JSON, so I am not sure I can even complain.

@george-hawkins
Copy link

Sorry for having been so negative. I think my issue basically came down to me just using tree mode for visualisation/navigation but doing all my editing in code mode.

It may seem odd that people don't want to work with something more sophisticated than the code mode but I just want something that behaves much like the editors I use when e.g. editing code but which provides a little bit more support than just treating the JSON as plain text.

This is what the old code mode (with the ability to switch to tree mode when needed) provided.

When I switched to the Beta, I'd no idea how I was supposed to start editing and managed to fail completely when trying to simply insert a new object within an existing array. I'm sure this is trivially easy but in the old code mode I could just type away with my existing knowledge of JSON, entering , { ... } just as I would in a normal editor, but with enough highlighting and other visual clues that I was creating valid JSON. Which is all I wanted.

I appreciate you may be aiming for people who want to work with JSON at a different level to this. However, maybe some quick user testing would help make clear what's obvious only to you and what's easy to work out for anyone. E.g. grab someone who knows a bit about JSON but has never used your editor before and ask them to perform a few simple pre-defined editing tasks and see where things go wrong for them.

@josdejong
Copy link
Owner Author

Thanks @FortTell, I understand what you mean. When you paste partial JSON or invalid JSON, the editor tries to repair, this indeed doesn't always work. When pasting on top of a value, the editor cannot know whether the text you paste was intended to be JSON or is just text, so when it can't repair it will simply paste it as text contents. When you paste between two nodes, the editor will open a modal where you can repair your JSON first. I think the old "code" editor was stronger with these cases: there you can simply paste text and repair it yourself afterwards.

@josdejong
Copy link
Owner Author

@george-hawkins I appreciate your honest inputs a lot! I know it's constructive feedback, thanks for taking the time to think along!

Thanks to all the feedbacks here I understand that there is simply soo many different use cases which are not or not fully covered by the new editor (the new "tree" mode). My own use cases fit quite nicely with the new editor (working with files so large they crash the "code" editor, diffing, filtering and transforming the whole document, etc). But there are simply also a lot use cases where the code editor is a better fit. And it's also personal preference.

To expain how to insert new data: you can click on the white space right from any value: a "new line" button will show up as visual indication, after clicking, you will "insert a new line": you will see a blue bar below the item. When this blue bar between lines is visible, you can simply start typing, or paste something, or click the insert button ("+") from the main menu. Alternatively can also click on a value, then press arrow right to create a new line. I myself hardly use the mouse in the new editor, and I'm able to make changes in a JSON document faster than I can in a raw code editor, because it selects keys and values and nodes as a whole. Quickkeys are the same as in any typical text editor, but these should be documented: arrows to move the cursor around, shift+arrows to select multiple, ctrl+x, ctrl+c, ctrl+v, Enter, Delete, and just start typing to insert or replace text content.

@josdejong
Copy link
Owner Author

To all: I've been thinking more about the code editor, and you guys have convinced me that we can't do without the code editor.
There are too many use cases and edge cases which are not covered nicely by the new editor, so it is important to have the code mode too. This way you can choose the best fit yourself depending on what you need to do with your data.

So I will add the "code" mode again. This will take some time though, I'll keep you posted.

@rkoshy
Copy link

rkoshy commented Jan 24, 2021

People also mention that it's unclear how to use the editor the first time. I think it will be helpful to have some kind of tutorial or introduction. Can you please let me know what was unclear to use the first time? For example:

  • was it unclear how to get your JSON into the editor?
  • unclear how to delete some data, or insert some new data?
  • unclear how to change a value?
  1. I have just spent a bunch of time trying to paste a simple JSON that I copied from a log file into this new editor -- No matter what I try I can't. It keeps treating it as a key, so it's escaping my json into a string, instead of treating it like the "code" editor view.
  2. Overall, deletion/insertions were "discoverable enough" -- not 100% intuitive, but 80% or so there.
  3. Changing values were EASY compared to the old way.

Overall the new editor is great. However, we still need the code view to sometimes tweak something or paste raw json, etc.

@josdejong
Copy link
Owner Author

Thanks for your feedback @rkoshy, glad to hear you like the new editor! The code view will be implemented again, you're not the only one in need of this.

About pasting a JSON document: I would love to understand what's going wrong here (bug? different expectations?). If you have troubles getting it to work, you may be not the only one. If you copy a (valid) JSON document from somewhere, you should be able to paste it in the editor as JSON (not text) like:

  • create a new empty document, click inside the editor so it has focus, then paste with Ctrl+V
  • click inside the editor so it has focus, press Ctrl+A to select everything, press Ctrl+V to paste
  • click on a value inside the loaded document so it is selected. Clicking Ctrl+V to paste will replace the value with the JSON from the clipboard
  • click right from any value in the editor, so the new line below it is selected (blue line between two lines), then click Ctrl+V to paste as a new inserted value
  • when selecting a key and then paste with Ctrl+V, the JSON contents will be stringified as the key
  • when the pasted contents cannot be parsed as JSON, it will be inserted as text with escaped characters etc.

Can you share the JSON you try to paste? Or maybe try it out with the following valid JSON:

{
  "greeting": "hello world",
  "theAnswerToLife": 42
}

@josdejong
Copy link
Owner Author

Buttons expand all and collapse all are now added to the editor (6.0.0-beta.2), addressing one of the feedbacks.

@josdejong
Copy link
Owner Author

Thanks for your suggestion @typeleven, you're not the first to ask, see josdejong/svelte-jsoneditor#13. Will be nice indeed to add this, most likely to the ContextMenu 😄.

@perfa
Copy link

perfa commented Jan 31, 2022

One thing I'd like to see is simple language extensibility, to allow for json5 or hjson. We're using the jsoneditor for configuration files and the ability to have comments is invaluable. With the code view we're just setting the mode to json5, but the current version doesn't have a clear way that we could get the tree view working, although intuitively as long as we could provide a mechanism that takes input and returns json or a syntax error the tree view should be doable.

@josdejong
Copy link
Owner Author

Thanks for your feedback @perfa . You're not the first to ask for support for JSON variants like json5 supporting comments. This is not on the roadmap any time soon, but maybe some day we can consider it.

@thernstig
Copy link

thernstig commented Feb 5, 2022

@josdejong we are coming from https://github.com/json-editor/json-editor, which supports CSS integrations. We are currently looking for new alternatives.

The documentation both for the new Svelte-based editor as well as the legacy one does afaik not mention how to use our own styles. What we are after is basically:

  • Color the editor ourself. Both menus, borders, code etc.
  • Select which icons to show/hide in the top menu. (Could possibly also be done via CSS of course).

We are interested in using the editor in read-only mode to let users of our application view JSON data but not edit it. But using our own styles.

Is this feasible?

@josdejong
Copy link
Owner Author

Thanks for your input @thernstig .

  • Though there is no official documentation, you can style jsoneditor yourself by just looking at the css style names and overriding the colors. There is a dark-theme example here: 06_custom_styling.html
  • It's still a bit too early for custom styling of svelte-jsoneditor but it's on the roadmap. The classnames will soon change (will get a unique prefix), and the plan is to use css variables (custom properties) there to make it easy to apply custom styling.

@thernstig
Copy link

@josdejong thanks for the quick feedback. NIce to see what can do custom styling. We can potentially then hide elements with display: none.

Looking forward to css variables, which is nice to use.

@josdejong
Copy link
Owner Author

@Minitour, in feedback on your comment #1223 (comment): the Transform modal now shows both original data and preview:

afbeelding

@josdejong
Copy link
Owner Author

The beta version is ready for prime time now. The planning is to go live beginning of next week 🎉.

@thernstig
Copy link

@josdejong has #1223 (comment) been fixed as part of this? :)

@josdejong
Copy link
Owner Author

@thernstig I want to implement a dark-theme badly, but will work on that right after publishing the beta. It's a new feature and not a regression, so no reason to block the release for it.

@josdejong
Copy link
Owner Author

🎉I've just officially published the renewed JSON Editor Online, v6.0.0, see: https://jsoneditoronline.org/ (you may need to refresh)

The classic editor is still available: https://jsoneditoronline.org/classic/index.html. If you need to switch back for some reason, please let me know what you're missing in the new editor. You can report that in the issues section of the new editor: https://github.com/josdejong/svelte-jsoneditor/issues.

Thanks again for all the constructive feedbacks, that helped a lot! I hope you like the result as much as I do.

@josdejong josdejong unpinned this issue Apr 11, 2022
@enesaltinkaya
Copy link

enesaltinkaya commented Apr 28, 2022

tadaI've just officially published the renewed JSON Editor Online, v6.0.0, see: https://jsoneditoronline.org/ (you may need to refresh)

The classic editor is still available: https://jsoneditoronline.org/classic/index.html. If you need to switch back for some reason, please let me know what you're missing in the new editor. You can report that in the issues section of the new editor: https://github.com/josdejong/svelte-jsoneditor/issues.

Thanks again for all the constructive feedbacks, that helped a lot! I hope you like the result as much as I do.

Thank you so much for keeping the old version. Please don't remove it.

Is there a way classic version can be run on local?

Edit:
I figured it out;
Classic: https://github.com/josdejong/jsoneditor
New: https://github.com/josdejong/svelte-jsoneditor

Thanks again.

@josdejong
Copy link
Owner Author

Thank you so much for keeping the old version. Please don't remove it.

The classic version will just stay available at https://jsoneditoronline.org/classic/index.html.

@enesaltinkaya can you explain why you prefer the classic version?

@enesaltinkaya
Copy link

I use jsoneditor for reading json files.

This is too crowded for me. Too much is going on.

This one is simple, to the point.
(I might even dig into the source to remove the parentheses at the end of each line)

@josdejong
Copy link
Owner Author

Thanks for your feedback @enesaltinkaya , you're not the first reporting that the new editor feels more crowded.

The new look is a bit closer to the original JSON data structure, with the closing brackets after the items of an array/object. When just using the editor for viewing, there is not much added value to the closing brackets. There is however a functional reason for it: this way, it becomes much easier to append a new item when dealing with nested objects. You can right-click right from the value or end bracket to insert a new item at that position. Without the end brackets, there is no way to specify at the end of which of the nested objects you want to insert the new item, see the three arrows in the following screenshot:

afbeelding

In the classic editor you have to either find the start of the right object/array, and choose append from the context menu, which is less intuitive than just right-clicking literally at the place where you want to insert the new item.

@enesaltinkaya
Copy link

I totally get your point. When editing/creating JSON data new features make lot of sense and necessary as you mentioned.

For me, I rarely need to edit JSON data manually, but I often need to check out/read ready made JSON files.

And for reading only, classic version's simple visuals are better (to me).

@josdejong
Copy link
Owner Author

And for reading only, classic version's simple visuals are better (to me).

Yes I agree, though it's also a bit of personal preference I suppose. At this moment though I do not want to implement a differing view when in read-only mode, the main focus of this editor is to edit JSON.

@thernstig
Copy link

@josdejong how about some configurability, similar to how we want CSS theming and other similar things? :)

@josdejong
Copy link
Owner Author

🤔 since the end brackets are not just visual but also needed functionally, it's not a matter of CSS theming: alternative editing behavior would have to be supported for that. I do not want to go in that direction, it will seriously complicate matters.

When you only use the editor for viewing though, it is easy to achieve by looking up the class names of the brackets and apply a CSS rule display: none !important; there to hide them.

As for the theming and a dark theme: I'm implementing support for that as we speak and making good progress there.

@josdejong
Copy link
Owner Author

@sergiychuk @thernstig a dark theme (and custom styling) is now available in svelte-jsoneditor. You can use the dark theme now in the web application v6.1.0, see https://jsoneditoronline.org

afbeelding

@Minitour
Copy link

Hi @josdejong,

This is looking great, but the orange/green colors look off a bit to me with the dark theme. Perhaps different colors should be used.

@josdejong
Copy link
Owner Author

josdejong commented May 13, 2022

Thanks. good point, I'll look into tuning them a bit darker or so. Proposals are welcome 😄

(EDIT: I also had difficulty finding good highlighting colors for diffing (created/updated/deleted), proposals for that are welcome too)

@Minitour
Copy link

image

Disclaimer: I am not a UI/UX designer

Another disclaimer: Inspired by VSCode

@josdejong
Copy link
Owner Author

thanks🤔. How about less brightness:

afbeelding

@sagrawal31
Copy link

Thanks, looks good. I only need this for viewing the JSON in my application so I was expecting that the new library will have tree shaking by default (as this is re-written from scratch). After replacing this with jsoneditor and ang-jsoneditor, the size of my application increased by 0.2 MB.

@josdejong
Copy link
Owner Author

josdejong commented Sep 20, 2022

Thanks for your feedback @sagrawal31. The new editor svelte-jsoneditor uses ES modules and is tree-shake-friendly in that regards. However, there is currently not much to shake because the editor is written as an integrated whole containing the two modes tree and text. If you only need one of the two modes, we can potentially save a lot of bytes, but that will require exporting a component which for example only loads the tree view instead of both tree and text view. This is on the wishlist but not the highest prio right now.

@sagrawal31
Copy link

Hi, @josdejong. Thanks for the quickest reply.

If you only need one of the two modes, we can potentially save a lot of bytes

Yes, I'm typically looking for this only. My use case is that I only want to show the text view with just the viewable ability, no modifications.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests