About BYOC

BYOC stands for "Build Your Own Component". It is essentially a component by itself that allows to create a new elements from scratch by coding HTML/CSS.


Screen Shot 2024-08-10 at 4.25.18 PM.png


It provides the following main benefits:

1Create custom components that is possible only with HTML/CSS

Creating a coloured shadow, or a complex polygon or a 3D transform is not possible with the existing components available in MockFlow. But by using BYOC, you can bring any css component that you want it to be part of your wireframe. Just copy-paste the code inside the BYOC editor for it to display.


2Visual editing of component


Once created, BYOC can be used by non-coders for making superficial changes with its WYSIWYG visual editor. Designers can change text, replace font family and also try different images easily without touching its code


3Bridge designer-developer workflow with first-class Tailwind support


This is one of the points that makes BYOC quite useful as a feature to connect developers with designers in your team. If your team already has a design system of Tailwind components, then they can be directly be imported as BYOC components inside the wireframe. So designers spend less time re-creating the UI to make changes. Also the imported Tailwind components can be modified inside the editor with live preview. 


4Generate specs


Since BYOC is written in pure code, when the wireframe is shared with your clients or developers, They can inspect BYOC components in review mode to generate specs. This makes hand-off smooth and implementation faster.


5MockFlow benefits


As BYOC by itself a MockFlow component, it can be resized, moved, duplicated, linked, exported, and also saved as custom component part of your UI packs.

That's not all, we anticipate more interesting features coming soon to BYOC, like native support of reactjs and vue based components in BYOC2.





Rate this article
great ok bad
For more questions - Contact Us
...