MARKETPLACE
PLUGINS
JSON MANIPULATOR
JSON Manipulator logo

JSON Manipulator

Published August 2021
   •    Updated today

Plugin details

After fighting a lot with other JSON plugins (JSON Machine, JSON Generator, ...) I've decided to build this plugin seeking one purpose: being able to save/read/manipulate JSON format text easily.
So with this plugin you can work with JSON inside your app, either in client side as element or reading JSON in server-side as action.

The purpose of manipulating JSON format in Bubble DB is to simplify /speed up complex DB calls, since working with the Bubble DB, especially on advanced queries with multiple related types, can be slow and have large server overhead. By reading from and writing to a single text field you can save significant work.

The plugin supports access to json elements by JsonPath format, see https://goessner.net/articles/JsonPath/.

EDITOR
https://bubble.io/page?type=page&name=json_manipulator_test&id=play-and-fun&tab=tabs-1&show_plugin=JSON+Manipulator

DEMO
https://play-and-fun.bubbleapps.io/version-test/json_manipulator_test?debug_mode=true

Free

For everyone

4.0 stars   •   14 ratings
7.6K installs
This plugin does not collect or track your personal data.

Other actions

Platform

Web & Native mobile

Contributor details

Marcel Gozalbo Baró logo
Marcel Gozalbo Baró
Joined 2025   •   6 Plugins
View contributor profile

Instructions

This plugin has 2 page elements:
1. 'Json' element:

Store the Json structure specified in 'base_json' field and provides an action 'update json' in order to modify the json fields.

When json is modified due to 'update json' action, the event 'json_changed' is triggered so you can listen this event to take the proper actions.

2. 'read Json':
Read a field from json text. The json key could be a name of a simple key field or you can use JsonPath format for accessing to concrete fields in a complex json structure. For more details see https://goessner.net/articles/JsonPath/.
IMPORTANT: Using a JsonPath as key will return the results as arrays on "read Json" properties!


When you want to create a JSON text, you place one 'Json' element, define the base json as input field and trigger the modify workflow in order to update the json fields. Then listen the 'json_changed' event for taking the correspondent actions.

When you want to read data from Json, use 'read Json' element. You place one unique element on the page for each piece of data you want to work with. You can provide the current json text value of a 'Json' element as 'read Json' in order to read one field of it.


Furthermore, if you want to read JSON fields at server-side (backend workflows), use the server-side action and enjoy.


Have fun! :)

Types

This plugin can be found under the following types:
Background Services   •   Element   •   Event   •   Action

Categories

This plugin can be found under the following categories:
Data (things)   •   Productivity   •   Technical   •   Input Forms   •   Visual Elements

Resources

Support contact
Documentation
Tutorial

Rating and reviews

Average rating (4.0)

Excellent
September 14th, 2025
Can’t read nested fields
August 31st, 2025
Summary When using read Json to read nested fields, the element fails to return values for keys under availability.monday (and similar), even though the same JSON works in external JsonPath testers. Top-level reads work; nested reads return empty. Steps to Reproduce Place a Json element on a page and set Base JSON to: { "availability": { "monday": { "label": { "en": "Monday", "es": "Lunes" }, "open": true, "hours": "09:00-17:00" }, "tuesday": { "label": { "en": "Tuesday", "es": "Martes" }, "open": true, "hours": "09:00-17:00" }, "wednesday": { "label": { "en": "Wednesday","es": "Miércoles"},"open": true, "hours": "09:00-17:00" }, "thursday": { "label": { "en": "Thursday","es": "Jueves" }, "open": true, "hours": "09:00-17:00" }, "friday": { "label": { "en": "Friday", "es": "Viernes" }, "open": true, "hours": "09:00-17:00" }, "saturday": { "label": { "en": "Saturday","es": "Sábado" }, "open": false, "hours": "09:00-17:00" }, "sunday": { "label": { "en": "Sunday", "es": "Domingo" }, "open": false, "hours": "09:00-17:00" } } } Add a read Json element. Set Json text = Json A's Json text (the output of the Json element). Set Key to one of these JsonPath queries (tested externally as valid): $.availability.monday.hours $.availability['monday'].hours $['availability']['monday']['hours'] Preview the page. Expected result read Json returns the string: 09:00-17:00 Actual result The element returns empty/undefined (no value). Top-level reads (e.g., $.availability) may return an object/string, but nested keys (e.g., .monday.hours) fail.
Hi there! Thank you very much for such detailed issue report, it's one of the better reportings I've ever received so helping you will be easy peasy :) What's happening here is if you are using JSONPath expression, the result is returned as array. This is something inherited from the JSONPath library implementation I am using https://goessner.net/articles/JsonPath/. So, you need to get the first element of "read Json" string list property instead of the string property. You can try it yourself on the https://play-and-fun.bubbleapps.io/version-test/json_manipulator_test?debug_mode=true testing page and below on the reading section, you will see the list of strings property is filled with "09:00-17:00". Let me know if it works and thanks for using my pulgin :) (plugin author)
September 1st, 2025
  •  
Original reviewer
Great plugin for nested JSON
August 14th, 2025
The latest update is fantastic, combining JSONPath with JSON object insertion unlocks powerful ways to manage and restructure deeply nested JSON. It has greatly simplified my workflows, removing the need for intermediate placeholder elements. The developer has been extremely helpful and responsive, making the whole experience even better.
Thank you very much for such review! So glad you find the latest update so interesting for your case :) (plugin author)
August 15th, 2025
  •  
Original reviewer
not working
August 6th, 2025
plugin is not working
Hi there! It's so sad to read this. Could you tell me your use case and what's failing? The plugin seems up&runnung for the rest of developers. BTW, you can also play with the DEMO page https://play-and-fun.bubbleapps.io/version-test/json_manipulator_test?debug_mode=true in order to see how to configure it. (plugin author)
August 6th, 2025
  •  
Original reviewer
The best JSON plugin I’ve ever used.
June 3rd, 2025
It’s very powerful. It may take some time to fully understand how to use it, but once you do, it includes everything you need for working with JSON phrases.
Thanks for such amazing feedback :) (plugin author)
June 9th, 2025
  •  
Original reviewer
Bubble logo
Product
AI
Mobile
Design
Data
Logic
Collaboration
Security
Status
Release notes
Bubble for
Founders
Developers
Agencies
Enterprise
Discover
How Bubble works
Examples
Pricing
Learn
Academy
Technical guides
Blog
How to build
Coaching
Resources
Connect to AI
Marketplace
Templates
Plugins
Experts
Bootcamps
Certification
Partnerships
Affiliates
Figma to Bubble
Community
Bubble community
Forum
Newsletter
Immerse
Early access
Store
Company
About
Careers
Brand guidelines
Support
Contact us
Legal
Terms
Privacy
©  2026, Bubble Group, Inc. All rights reserved.
Bubble
Pricing
Enterprise
Contact sales