JSON Custom Block Converter (v25.08.03)

For use with Mobirise* code editor OR DeltaPi Code Editor

⬇️ Download JSON Custom Block Converter Please wait...

🧩 What is JSON Custom Block Converter?

JSON Custom Block Converter is an application that lets you visually convert your HTML/CSS code into JSON format for use in Mobirise* with Witsec Design Block.
You can use the generated file to complete the Witsec gallery and share your personal blocks.

🔀 Choice between Mobirise* or DeltaPi code editor
📝 Convert your HTML and CSS to JSON file
📄 Real-time JSON preview
🎨 Syntax highlighting (HTML, CSS)
⚙️ Theme preferences (Light/Dark mode)
📦 Save your work as .json file

Preferences and Theme

Open the menu Options → Préférences to switch between light and dark themes. Your selection is stored locally in config.json.

Interface Overview & How it Works with Mb Code Editor OR DeltaPi Code Editor

The application provides two editors accessible via tabs:

Mb Code Editor tab: Copy/paste your HTML and CSS from Mobirise* Code Editor

DeltaPi Code Editor tab: Paste existing JSON to re-export from DeltaPi Code Editor

🧱 Convert with Mb Code Editor

This interface is ideal if you're working from a Mobirise* block. The screen is divided into three vertical panels:

Left: HTML editor
Center: CSS editor
Right: JSON preview panel

Simply copy your HTML and CSS code from Mobirise* (or any other source), paste them in the corresponding editors, then click "Convert / Save" to generate your JSON file.

You can then import your custom block into Mobirise* using the Witsec Design Gallery → Import.

🧩 Convert with DeltaPi Code Editor

This mode is suitable for advanced users or re-editing exported JSON blocks. You can:

Paste an existing JSON block
Click "Convert" to generate a clean Witsec Gallery-compatible JSON
Save the result directly as a .json file

This is a quick way to modify your blocks outside Mobirise*.

Convert and Save

Click on Convert to process the HTML & CSS and output the corresponding JSON. You will be prompted to save the result as a .json file.

Clear Fields

Click on Clear to reset the HTML, CSS, and JSON areas. This is useful when starting a new block.

About Dialog

The About window displays your app logo, name, and version. It opens centered on screen and blocks interaction until closed.

Quit Button

Clicking Quitter in the main interface cleanly exits the application.

Technical Notes

logo.png is used in the About window
app.ico is used for window/icon branding
config.json stores the last selected theme

⚠️ Disclaimer

Important: Before using blocks, add-ons or software, please make a full backup of your project folder.

While this tool has been tested to operate safely, it performs mass modifications to your files and folders. The author cannot be held responsible for any loss, corruption, or damage caused by its use.

Use at your own risk — always work on a copy when in doubt.

* Use of the Website/Services is at your own risk. The Website/Services are provided on an "AS IS" and "AS AVAILABLE" basis without any representation or endorsement made and without warranty of any kind whether express or implied, including but not limited to the implied warranties of satisfactory quality, fitness for a particular purpose, non-infringement, compatibility, security and accuracy. To the extent permitted by law, Zen2cool will not be liable for any indirect or consequential loss or damage whatsoever (including without limitation loss of business, opportunity, data, profits) arising out of or in connection with the use of the Website/Services. We strictly try not to break any copyright law, and in case any data gets included unknowingly in our design/product, we are always willing to remove/rectify the same since we respect the copyright law.

* Mobirise and the Mobirise Logo are trademarks of Mobirise.com and are acknowledged as such.