Quick answer
An element controls appearance, such as a text label, shape or image. A component can combine elements with defined behavior or a data source. Understanding that separation prevents mistaking an attractive sample for a working live widget.
Elements draw. Components communicate.
An Element is a single part of a design: a text label, image, shape, ring, line or progress bar. It has properties such as position, size, color and opacity. By itself, it does not know your battery level or the current date. You might type “75%” as ordinary text and it will remain the same until you edit it.
A Component contains one or more elements linked to a data source or behavior. A battery progress component, for instance, uses data to decide the displayed number or fill amount. The look can still be customized, but the reading is no longer just decoration.
Try it on your home screen
- Add a plain text element and a colored shape to the canvas.
- Move and resize them independently to see how the visual layers work.
- Add a supported component and inspect which data fields or options it exposes.
- Change one setting at a time, then preview and install the result.
Why the distinction saves time
If your first design looks good but never changes, check whether you placed a static text element or a data-connected component. Do not rebuild the entire widget until you know which part is static. Also, a component can include several elements that should move together; this may be easier than keeping a label, number and bar aligned manually.
A safe first experiment
Make a plain progress bar with a fixed fill to learn spacing and colors. Duplicate it or save a draft before connecting data. When you add a data source, use example values in the editor so the shape remains easy to inspect. Switch to the real source only after its permissions and refresh behavior are clear.
WidgetCraft's beginner tutorial includes a progress-bar widget with sliders and a color wheel. You do not have to learn formulas for an ordinary first widget. See building a progress bar without code for a step-by-step layout.
Check the result
One styled number may be easier to make with text alone, but it will not update with the phone clock unless connected to supported time data. Similarly, grouping multiple visual elements does not automatically turn them into a live source. Keep examples separate from real data when sharing templates.
Common question: Can I create a useful widget without writing code?
Yes. Basic layout work uses the visual editor. Connected data and advanced integrations still depend on which components and sources the app supports.