English

Custom Widget

update: 2025-05-17
This feature is only for the PC version.

Solacepace's Custom Widget is a powerful tool that lets advanced users create and embed their own mini web apps using HTML, CSS, and JavaScript.

From simple visual elements to interactive features, you can bring your own ideas to life—directly inside your workspace.

Widget Structure

The Custom Widget consists of three input areas:

  • HTML – Define your structure (e.g., buttons, lists)
  • CSS – Style your elements (e.g., layout, colors)
  • JavaScript – Add behavior (e.g., click handlers)

All code is instantly rendered inside the widget, so you can see your changes in real time as you edit.

Sample Code Format

You can write code using <html>, <style>, and <script> tags like this:

<html>
  <div class="hello">Hello!</div>
</html>

<style>
  .hello {
    background-color: red;
    color: white;
    padding: 10px;
  }
</style>

<script>
  console.log("Hello from custom widget!");
</script>

This approach lets you build self-contained web components, all within a single widget.

What You Can Build

The possibilities are endless, including:

  • A custom countdown timer or clock
  • Notes with personalized styles or layout
  • Interactive buttons or simple form UIs
  • Small automation scripts or visual effects

It's your canvas—use your imagination.

Embed External Services

You can also use <iframe> to embed external content. For example:

  • YouTube or Vimeo video players
  • Code sharing tools like CodePen or JSFiddle
  • Google Maps, data visualizations, and more

⚠ Note: For security reasons, some JavaScript features are restricted. Scripts run in a sandboxed environment, so not all functionality is guaranteed to work, especially features that interact with the broader browser or external APIs. We recommend building incrementally and testing as you go.

⚠ For Advanced Users

While extremely powerful, the Custom Widget assumes basic knowledge of HTML, CSS, and JavaScript. To avoid errors or unexpected behavior, start small and build up gradually.

If you're experimenting with new ideas, tools like CodePen are great for prototyping before transferring code into Solacepace.

Final Thoughts

Solacepace’s Custom Widget is the ultimate extension tool for creators who want to build their workspace by hand.

Whether you're embedding a utility, styling your space, or integrating outside content, the only real limit is your imagination.

So go ahead—experiment, tinker, and create your perfect digital space.