Repository navigation
Replies: 2 comments 9 replies
|
Hey @philnwoha! Welcome, and thanks for giving Templatical a look! 👋 I have a good news for you: you don't actually need npm for this. The distinction you spotted is real, I shipped a curated first-party CDN bundle for the editor because I has bunch of runtime dependencies, I want CDN editor to be drop-in for any app, even basic HTML page. But all importers, including Here's a quick version using plan <script type="module">
import { convertUnlayerTemplate } from 'https://cdn.jsdelivr.net/npm/@templatical/import-unlayer@0.16.1/+esm';
// whatever your Unlayer editor returned from editor.saveDesign(...) OR saved design from your storage (DB)
const unlayerJson = await fetch('/path/to/unlayer-design.json').then(r => r.json());
const { content, report } = convertUnlayerTemplate(unlayerJson);
console.log(content); // → Templatical TemplateContent (feed straight into the editor)
console.log(report.summary); // → { total, converted, approximated, htmlFallback, skipped }
</script>From Blazor, via JS interop: // wwwroot/js/unlayerImport.js
import { convertUnlayerTemplate } from 'https://cdn.jsdelivr.net/npm/@templatical/import-unlayer@0.16.1/+esm';
export function convert(unlayerJson) {
return JSON.stringify(convertUnlayerTemplate(design)); // { content, report }
}var module = await JS.InvokeAsync<IJSObjectReference>("import", "./js/unlayerImport.js");
var json = await module.InvokeAsync<string>("convert", unlayerDesignJson);
// json → { "content": {...}, "report": {...} }; deserialize and store content.If this is a one-time migration of existing templates rather than a live in-app feature, you don't even need the interop wiring. The same call works in a throwaway script (or just paste your JSON into a small page using the first snippet). Would this work for you? Make sure to check And feel free to open an issue on this repo if something is not working as expected with importer. |
|
I used the opportunity to also document the CDN option for importers: https://docs.templatical.com/guide/migration-from-unlayer |
|
@orkhanahmadov wow thank you so much for the quick reply and for the code samples. I was able to get this working however I have run into a rather odd issue. Below is the sample unlayer json file i'm using: |
|
@philnwoha Sorry, that's my fault, the JS wrapper in my snippet is buggy. I created it from my memory and passed it to AI to complete the code and it was wrong. export function convert(unlayerJson) {
return JSON.stringify(convertUnlayerTemplate(design)); // <- "design" is undefined here :)
}Probably correct version should be like: export function convert(unlayerJson) {
const json = typeof unlayerJson === 'string' ? JSON.parse(unlayerJson) : unlayerJson; // just to make sure json object is correct
return JSON.stringify(convertUnlayerTemplate(json));
}I also ran your exact JSON through the importer here and can confirm it converts cleanly: 3 sections, 7/7 content items, no issues. I think issue was my broken code example. Here's your JSON imported directly in playground, using playground's import feature: https://play.templatical.com/?s=6XXacPOAlN My code example could still be wrong, don't trust it, give it another try, hopefully all works 🤞 |
|
@orkhanahmadov thank you for the quick response. Unfortunately I still cannot get the code to work. Below is my javascript file using the default unlayer design json: 
|
|
@orkhanahmadov my sincerest apologies for wasting your time on that. This was entirely my fault and I can confirm the import code is working. I can also confirm the renderer code is working as well. Thank you so much for helping me with this. I'll be doing a demo for my business partner soon and if it goes well we will be switching to templatical. We will also be sponsoring the project if we move forward with this as that is the very least we could do for such an amazing project. Thank you again. |
|
@philnwoha No worries, I'm happy I was able to help :) Great to hear the importer and the renderer are both behaving. Good luck with the demo! If anything comes up while you're preparing: a template that doesn't convert cleanly, a rendering edge case, or a question about the editor side - feel free to open a discussion or issue and I'll help however I can. And thank you for the kind words and the offer to sponsor, that genuinely means a lot. But please don't feel obliged: the best thing you can do for the project is build something you're happy with and tell me where it falls short. If you do move forward and want to sponsor later, it'd be hugely appreciated. And separately from any sponsorship, if the project is public and you end up shipping on Templatical, I'd be genuinely glad to feature your logo as one of the teams building with it. Just send it over once you're live. |
|
Will do! |
|
@orkhanahmadov just wanted to let you know we were able to transition away from unlayer to templatical. We have also started sponsoring this project and are very grateful for your work. Unfortunately the project is not public and requires a subscription so I'm not sure if our logo will be useful to you. Again thank you for your work and we look forward to future updates! |
|
Hi @philnwoha, Happy to hear you migrated to Templatical and thanks a lot for sponsorship! Regarding updates, docs now include dedicated changelog page. I ship new features and fixes almost weekly, sometimes multiple times a week. Keep an eye there to be up to date https://docs.templatical.com/changelog |
Uh oh!
There was an error while loading. Please reload this page.
Hi I recently discovered templatical and would like to make the switch from unlayer. Unlayer is fine but it is very expensive and my business is very small. My code stack is .net (specifically blazor). Rather than converting everyones json by hand, I would like to do it on the fly instead. The problem is it appears that the unlayer importer requires a npm installation (unlike the editor that can be loaded via cdn). Is it at all possible to the conversion without a reliance on npm?
All reactions