New Improvements & Fixes

Kajoo now has a brand new WYSIWYG Canvas that lets you add, manipulate, and style rendered elements in real time.

Kajoo 1.2 introduces the major addition of a brand new Canvas experience. Unlike the original Canvas, this Canvas provides a live preview of the final rendered code - you can even open up inspector and look at the DOM yourself as you manipulate it in real time. While we’re still supporting the original Canvas and have plans in store for it, this new Canvas gives you greater flexibility to make components pixel-perfect to your designs.

Users can now import Figma Designs utilizing the new Kajoo plugin for Figma and the new Kajoo Canvas

We’re very excited to announce that Kajoo now has the ability to import designs from Figma, all in a few clicks! First, install the Kajoo plugin. Then, open your Figma design. Right-click the frames that you want to export, open the Kajoo plugin, then click “copy layers.” Once that’s done, you can open a new Figma project in Kajoo, paste the copied design, and see the code rendered immediately!

The new Canvas has a completely redesigned Data tab, which offers much more information and options for each element placed on the canvas

The Data tab shows every element in the project, along with all relevant options per element. Users can see how selected elements will be translated into Sitecore fields upon deployment, or they can change them into static, hard-coded values in the markup. Users can also switch element types from the Data panel (eg text to rich text).

Kajoo’s new Canvas also supports Sitecore-First development. Users can now bind their projects to existing Template and Rendering items within Sitecore

Often times, Sitecore projects will have built-out Information Architecture, which includes a number of templates with complex inheritance structures. Kajoo lets you work with these templates by letting you bind these existing templates to your Kajoo projects, then binding specific elements to fields in the templates.

The way it works is this: In Kajoo you already can set up Site Configurations for the purposes of deployment. We have expanded the Site Configuration Options to include a field for Sitecore Layout Services URL, which allows Kajoo to access the Templates and Renderings in your Sitecore Instance of choice. After setting up the connection, in your Kajoo project you can click “Bind” to select the Site and Instance. Then, you can pick the rendering item of your choice from your Sitecore Instance. Kajoo will grab the existing template attached to the rendering item. After choosing the rendering, the project is considered “bound,” and the option to bind selected elements to template fields will appear in the revamped Data tab.

Once a project is bound, every element must either be bound to a template field or designated as a “Static Value,” which will render not as a dynamic Sitecore field but as hard code. You can also choose to unbind your project, which will sever the connection between your project and the Sitecore instance, and reverse the links between your project’s elements and the selected Template’s fields.

When you deploy a project that is bound to a template, you can only deploy to the site that the template is located in. Then, instead of creating new template and rendering items, Kajoo will simply push the code linked to the rendering item in Sitecore.

You can now use Code Sandbox in the New Canvas to preview how your component will behave in production

You can now preview Kajoo projects directly in CodeSandbox, a powerful browser-based IDE for web development. Simply press the “Publish to CodeSandbox” button next to the Publish button in the canvas, and quickly see your component live in the browser.

The Kajoo Plugin for Sitecore now includes the ability to give a nickname to the Sitecore Instance in question, which appears in the Instances list in Kajoo

When you install the Kajoo plugin to the Sitecore instance(s) of your choice, you now have the option of giving the instance a custom name. When you subsequently log into the Kajoo plugin on Sitecore, you’ll be able to see both the name of the instance along with the name of the organization the instance is registered under.

Sites can be configured as either React or Next.JS sites

Kajoo now supports the ability to pre-set deployment frameworks for Sites. If you have a JSS site that utilizes Next.JS, you now have an option in Site Configuration settings to select Next.JS as a deployment framework. Then, when you commit your project code to your repo, or deploy your project to Sitecore, it will utilize the correct Next.js code framework.

Users can now choose to download their code in either React or Next.JS

Whatever your Site Configuration settings, you can always choose to download your project’s code in either React or Next.JS now. In the publishing wizard, simply choose the framework of your choice after selecting the “Download” option.

The new Canvas has a Tree tab that allows the user to see the hierarchy of elements in their project as they are nested in the DOM

In the new tree tab, users can see how elements are nested in the way they’ll be arranged in the DOM. Users can also select items in the tree, which works the same way as selecting them on canvas, and can even move items around by rearranging them in the tree.

Added the ability to add sample data such as Placeholder Text to elements on both classic Canvas and new Canvas

In Kajoo, you can now add sample data to a number of elements and see your changes live in the Canvas. When you export your project’s code, this sample data will act as a default value for the element as Sitecore field, or if you choose to make it a static value, it will be hard-coded.

Added Rich Text Element to new Canvas, for both generating code and binding to existing Rich Text fields

Kajoo’s new canvas now has a Rich Text element. When deployed to Sitecore, all Rich Text Elements will render as Rich Text Fields. Adding the Rich Text element also allows users to bind Rich Text Elements to Rich Text fields when projects are bound to existing Sitecore Templates.

Added the ability to change the HTML tag rendered for specific elements

Users can now select the tags used by various elements - for example, select among <div>, <section>, and others for containers, or <h1>, <h2>, and others for headers. This change can be made either in the “Design” tab on the right, or by simply clicking a header above a selected element. This update gives users the most flexibility over their rendered markup.

Users can toggle between auto and freestyle positioning in the new canvas

Elements can snap into place using auto-positioning, or you can switch off auto-positioning to place them more exactly with freeStyle positioning. Freestyle uses absolute positioning in CSS in addition to top, left, right, bottom values.

The Password Confirmation Screen has been restyled

The password creation/confirmation screen now has Kajoo branding.

FTP passwords and SSH keys are now hidden in the Site Configuration settings

In configuration settings for head deployment, the FTP password field and SSH Private key fields are now hidden.

Deployments page now offers full logs for download in addition to generated code artifacts

From the Deployments page, you can see the logs for each attempted deployment. Additionally, you can download the generated code from each deployment, even if you had selected the “Check-In” or “Deploy” options in the publishing wizard.

Users with the Org Admin role can now see all Site Configurations and Projects in their Organization

Users with the Org Admin role can now see all projects in their organization on the projects page, as well as all site configurations in their organization in the Configurations page.

Redesigned the Projects screen, including “Recent,” “Yours,” and “Shared With You” tabs. Also includes Updated Icons for projects, which distinguish between classic Canvas and New Canvas

The Projects screen has been redesigned to give users a more multifaceted view of the projects that are available to them.

Build Errors now appear in Notification Center

Now, build errors will appear with details in the notifications center.

Updated “New Project” menu text

The New Project menu text has been updated to be clearer. For example, “Create From Sketch” has been altered to say “Convert a Hand-Drawn Wireframe” in order to prevent confusion about utilization of the software known as Sketch, which is not currently supported with Kajoo.

The New Canvas includes all of the basic features from the old canvas, including Zoom, Redo/Undo, and project sharing

All the basic features you expect from canvas are present on the new canvas, including Zoom, Redo/Undo, and Project Sharing.

The new Canvas has all of the styling options offered in the old canvas, including Theme functionality, breakpoints, the CSS editor, background images for containers, and much more

All of your favorite Kajoo styling functionality, including our advanced styling rules, the css editor, background images for containers, and custom themes and variants, are available in the new canvas.

The New Canvas also incorporates existing advanced code generation and publishing features, including the ability to download code, check it into a github repo, and deploy directly to a configured Sitecore instance

The new Canvas also supports existing functionality around publishing projects, including code download, checking in to github, and deployment to Sitecore.

The new Canvas also supports existing functionality around publishing projects, including code download, checking in to github, and deployment to Sitecore

The elements menu in the new canvas is revamped, offering a new organization of elements. Elements in this menu can be simply dragged onto the canvas and dropped.

Released a hotfix for an issue where roles were not assigned after signup

This was a fix pushed out for 1.1, for which there was an issue where roles were not automatically assigned to users after signup.