-
-
Notifications
You must be signed in to change notification settings - Fork 2.1k
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
Comments
I just checked out the beta and had a couple of first impressions:
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! |
Thanks a lot @rtp4jc for your constructive feedback, this is really helpful!
|
Ah! The recursive expansion feature is cool! I definitely will use that on top of the expand all. About the 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. |
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. |
The new editor makes small edits/copying part of value cumbersome. 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). |
I very miss the "code mode" with "format JSON data" option - this is what I used the most. Up until now, it's harder to work with the new version. |
Same here, I use that feature all the time so I can't use the beta yet |
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. |
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. |
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. |
Please add |
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. |
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. |
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. |
@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.
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? |
@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..."? |
@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? |
@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. |
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:
|
I gave it a try. All test were performed by pasting the content into a completely blank window in the new interface.
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. |
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 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. |
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. |
@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. |
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. So I will add the "code" mode again. This will take some time though, I'll keep you posted. |
Overall the new editor is great. However, we still need the code view to sometimes tweak something or paste raw json, etc. |
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:
Can you share the JSON you try to paste? Or maybe try it out with the following valid JSON: {
"greeting": "hello world",
"theAnswerToLife": 42
} |
Buttons expand all and collapse all are now added to the editor ( |
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 😄. |
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. |
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. |
@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:
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? |
Thanks for your input @thernstig .
|
@josdejong thanks for the quick feedback. NIce to see what can do custom styling. We can potentially then hide elements with Looking forward to css variables, which is nice to use. |
@Minitour, in feedback on your comment #1223 (comment): the Transform modal now shows both original data and preview: |
The beta version is ready for prime time now. The planning is to go live beginning of next week 🎉. |
@josdejong has #1223 (comment) been fixed as part of this? :) |
@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. |
🎉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. |
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: Thanks again. |
The classic version will just stay available at https://jsoneditoronline.org/classic/index.html. @enesaltinkaya can you explain why you prefer the classic version? |
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: 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. |
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). |
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. |
@josdejong how about some configurability, similar to how we want CSS theming and other similar things? :) |
🤔 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 As for the theming and a dark theme: I'm implementing support for that as we speak and making good progress there. |
@sergiychuk @thernstig a dark theme (and custom styling) is now available in |
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. |
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) |
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 |
Thanks for your feedback @sagrawal31. The new editor |
Hi, @josdejong. Thanks for the quickest reply.
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. |
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
andcode
. 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
andtree
) 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:
tree
mode.Important questions to me are:
code
mode? If so, in what circumstances?I really need your feedbacks here, thanks!
Feedback summary
Based on the feedbacks I've created action points:
code
modeThe text was updated successfully, but these errors were encountered: