What is your favorite Webix destination? Let me guess. If it is not docs, it is obviously Webix snippets, the tool for code prototyping and sharing. Starting from today, you can use it to browse hundreds of useful snippets. Join me to find your favorite snippet.
Search Interface
We have created a database of functional snippets, most of which are familiar to you from the documentation (yep, we are lazy). These snippets are marked with tags and titles, which appear on the toolbar. You can open any starter snippet (hit the New button) to see them in action.
To the right of the tags, you will notice an input. This input and the tags are the doors to the snippet search interface.
How to Use
To search by tags, click on tag labels on the toolbar or type in hashtags like #datatable or #dynamicloading. Mind that manually typed tags must not contain spaces, much like with hashtags in Facebook and Instagram.
You can also enter any text to search, for example:
skin #kanban
#multicombo styling
Searching by hash tags will output the snippets that exactly match the tag while plain text is more flexible due to the partial match.
Want to Get Featured?
If you have nice and functional snippets and feel that you can contribute to the catalogue, write to our forum or drop a line here in the Comments section with the link to the snippet. We will review them and add them to the database.
Unveiling Snippet Secrets
The most devoted of you who stayed with me till now will be rewarded with some tips regarding snippet functionality.
Snippets with Data Sharing
The #presets snippets contain a group of samples for Complex widgets with the possibility to share user data. In these widgets, the data shapes the UI, that’s why it is important to save it before sharing.
How it works:
- you work with the widget in the snippet tool and change the data in UI (e.g. move Kanban cards or style Spreadsheet cells).
- Click Share, and everyone who gets your link will see the same UI.
Such snippets contain the code for saving data for snippet tool, in a real app it should be removed.
How to Open Full-screen Snippets
To view and share a snippet without showing the code on the screen, switch on the full-screen mode. You can do this:
- on a mobile device, scan the QR code of the snippet
- on a desktop device, add /m to the URL of the snippet as in webix.snippet.com/m/your_sample
A Nifty Tip for Lovers of Testing
This feature is quite useful for testing, and we use it pretty often ourselves. How this works:
- Open Snippet Tool and press Shift+Alt+W
- Enter the relative path to the Webix sources (relative to your localhost, e.g. webix or libs/webix)
- Open the Webix version selector and choose Local
* Mind that icons and fonts won’t render because of CORS, unless you enable cross-origin sharing in your browser.
Pat a Cat…
…and stay tuned for news about Webix 6.3. In the meantime, do not forget that our creativity goes in both directions and check the article with a list of all the outdated API and features that will be removed in Webix 7.0. Autumn is coming.
Apart from Snippet Tool, there are two more Webix tools, Form Builder and Skin Builder. So do drop us a line or two if you are happy (or unhappy) about them, any feedback is welcome.
