Since Webstudio is an opensource initiative, and coolify is a self-hostable alternative to netlify, I think it would be offering people who want something selfhostable something really nice

https://coolify.io/

It would be really helpful to be able to either transfer design tokens from one project to another or, alternatively, define tokens at an account level, so that people are able to re-use them across all of their projects. One of the major issues is that if you have a lot of tokens to manually add for each project, you lose a lot of velocity in design and development.

I would see design tokens being exportable and importable, being one of the more sensible approaches since that could potentially be done by implementing JSON import-export functionality. Where the JSON would contain the design token collection and their values.

It would be really helpful to have a docker image to be able to deploy, rather than use the current depplyment method, which is a bit convoluted.

Q: Is there any support for adding analytics tools like hotjar and/or Google Analytics ? Is it through the HTML embed ? Does it impact performance over adding the code for them by pasting it in the header ?

Hi folks. Working on porting a website with Webstudio to do some performance testing, and I've hit a small snag. Trying to animate a SVG and it doesn't seem to work.

How I went about it is to have a HTML embed into a button, and then another HTML embed with visible=false, where I've added the CSS code that does the animation. However, when I try to bring it live, the animation is not working.

Code for the SVG:
<svg class="svg-area" width="16px" height="16px" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="translate(25,25)">
<circle id="core" cx="0" cy="0" r="6" fill="#86CC16"></circle>
<circle id="radar" cx="0" cy="0" r="6" fill="#86CC16"></circle>
</g>
</svg>

Code for the CSS:
body{
font: 62.5%;
}
p {
width: 100%;
font-size: 1.1rem;
text-align: center;

.title {
margin-top: 1rem;
}
}
.svg-area {
display: block;
margin: 0 auto 0rem;
background: #efefef;
}
#core {
fill: #ff4f81;
animation: pulse1 1.5s ease-in-out infinite;
}

#radar {
fill: rgba(#ff4f81, .5);
animation: pulse2 1.5s ease-in-out infinite;
}
@keyframes pulse1 {
0% {
opacity: 0;
transform: scale(0);
}

30% {
opacity: 1;
transform: scale(1.5);
}

60% {
opacity: 1;
transform: scale(2);
}

100% {
opacity: 0;
transform: scale(2);
}
}
@keyframes pulse2 {
0% {
transform: scale(1, 1);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: scale(6, 6);
opacity: 0;
}
}

Would appreciate any help that could tell me what I'm doing wrong