I understand that proper tables are planned. This is likely to be a GUI task for the most part. I wonder if you – for now – couldn't extend your markdown-support, so that users can simply paste tables in Markdown format:

| Month | Savings |
| -------- | ------- |
| January | $250 |
| February | $80 |
| March | $420 |

When a selected element holds zero content (a box you just created) why is Local in Style-Sources Blue? I understand that Local needs to be active, when no token is applied – but should it show the colour it also has, when it holds styles? My issue with blue as the default state:

1) You cannot know whether a selected element is actually empty or has some hidden setting somewhere. See attached screenshot. I could have posted the same image twice, as there is no visual difference – yet I have applied a hover-effect to that box.

2) Also with Tokens applied to elements…
⬝ you still can't know whether Local also holds content (deliberately or accidentally).

With Tokens applied to an element (second screenshot), as soon as you click to activate the Local Tag, it again becomes Blue: How, other than by scrolling down the Style panel, can you know for sure whether or not it holds data?

The Webstudio app on Windows with an English OS assumes all text to be English and marks every word in other languages as wrong. Notion that uses a similar wrapper gives users an option to turn off spell-checking (second screenshot). Could you have a look whether you can also give us this option?

Currently, it is tremendously easy to litter a WiP project with dozens or hundreds of Tokens, Variables and Images that you won't use. Just go to the marketplace and click a few sample-projects. Whatever you click imports its assets, which remain in the project after deleting the sample-content.

I was foolish enough to do this with a project I'm working on. Cleaning up would have meant deleting one-by-one –  I therefore rather migrated my good content to a fresh project.  I realize that administration-tools for Tokens, Variables and Images are still basic – but the problem I described exists. Maybe it would be in order to give us a scripted cleanup tool, until you have a GUI-implementation?

What's the easiest way to send form-data to an E-Mail address I define? I log into Webstudio via GitHub and would like to use another E-Mail than used for GitHub credentials.

Neither can I replace global root in a new project, nor do instances that carry [variable] bring this variable into the new project. Variables always go missing when pasting to new projects. What's the mistake I make?

Currently, sharing an isolated problem means a multistep process in WS = friction. I'm convinced that people would post more question or bugs when isolating and sharing issues would be more straightforward. Maybe you at some point can give us an isolation-mode. Primarily, it should help us finding and fix problems – but it should also allow sharing just the relevant bits of a project.

Possible Flow:

1. Run into question or malfunction
2. Select the element that you consider problematic and call Isolation-Command from Navigator or Canvas.
3. Everything that has no direct impact on the selected elements gets hidden.
4. Debug. If you can locate the issue, fix it and exit Debug Mode.
5. If the problem persists, share with support.
6. A Temp-project is created from visible objects and opened in a new tab, ready to share on Discord.

Screenshots: Access Isolation Mode from Context Menu. Floating Isolation Panel with option to share file.

I want recolour selected elements by pressing a hotkey that brings up the Eyedropper. The Figma equivalent is pressing the letter I.
Demo: https://youtu.be/V7waqacFYZs?t=44

I regularly spot quirks on Windows that seem not to exist on the Mac. Could you also test with a Windows machine?

In the screenshot, there are two separate paragraph blocks as a typical result of a copy and paste import. Maybe user wants to merge these text blocks for simplicity. Wouldn't it be handy, if one could simply drag the second paragraph block onto the first one (both in viewport and navigator) to merge them?

Also the opposite (=splitting) may be desirable, when one wants to apply deviating styling /responsive behaviour to a text-portion. I'd find a "split to new" option neat for highlighted text. Currently, if you highlight, as in screenshot 2 you cannot even cut this text and paste it as a new paragraph text item underneath. WS will ignore your subselection and cut the full paragraph. This feels wrong.

I am aware of the necessary steps to do either manually – I just find this needlessly cumbersome.

Many Cloud apps let you change the name of your current project while having it open – screenshot is from Google Sheets. I would find this handy for WS, too. That way one could rename the open project and hit "Clone". As WS is set up in a way that the current project stays active, the Clone would store your current approach. The open version would become the branch.

As a Learner I would like to mark versions when I try out something new ("version with background images"). Always having to go to the Dashboard is slow. Exploring different problem solving approaches inside one project (separate pages) means having to build a clearly labeled navigation first.

Webstudio looks like a great choice for complex presentation or portfolio websites which aren't templated. One aspect, however, is quite a limitation: The canvas and also preview mode cannot represent what exactly will be visible on your initial screen.

Sites that use scroll snapping and have clearly defined “slides” are a great example – here you never see a realistic view of your work within Webstudio. Interestingly, you get that high-fidelity preview when coding and watching your site in the Browser. 

I wonder if you have considered a synced Browser Tab (ideally shown on a second screen) that shows device previews – possibly even several of them, side by side. The screenshot shows a CSS Editor that is mainly thought as an inspection tool, which offers this.

Super powerful concept - in principle - but potentially bloating file size with traditional hosting.

That's at least our experience: You're using just one font file, but it with all its variations is much larger than traditional font pairings. In the end, we had to ask the font foundry to remove characters and variations we clearly won't need.

Maybe the web app paradigm opens other options, such as only serving the font varieties used in the project (similar to atomic CSS mindset).

Terminology question. In your App / Docs / Videos you always speak of instances if you refer to elements on the page. I understand an instance as a non-unique copy of something, often driven by some common parent. Elements on the canvas may be an instance – but often enough, they are unique – such as images.

Of course, one from the perspective of the app-creator may see elements on screen as instances of components you make available – in that sense, bitmaps indeed live in an instance of your image component. 

Then again – users will likely find their creations unique and think of the "About"-Card and the "Contact" card as different items, even the underlying HTML-element has the same structure.

This just struck me as odd and unprecise – but I'm neither a native English speaker, nor a code-wizard.

Is this usage for the term instance common in visual Web-Builders?

What is the best way to gradually darken an image overlay on page-load – so that text and buttons get more visible? I tried opacity transitions, but this seem to expect Hover as a trigger. Is there a way exposed via GUI to run an opacity animation, on page-load?

I found a feature-rich, but dead-simple to implement Lightbox.

⬝ Add html embed
⬝ Add class to all images you want to enlarge
⬝ Optional: In "Advanced" change cursor on images to "Pointer"
⬝ If you have Alt-text it will show as a Caption. You can change this behaviour.

https://github.com/nextapps-de/spotlight
https://p-c1656bd9-926a-4003-afc4-583d46280482.apps.webstudio.is/?authToken=5984a608-5041-492a-ad64-f0ddafd110f9&mode=preview

I try to modify a Photoswipe snippet, kindly originally shared by @voytado, but I'm stuck. Anyone willing to help?

Changes
1) Photoswipe should not expect gallery sections, but just work on every image on the page.
2) The Lightbox should use this Caption extension: https://github.com/dimsemenov/photoswipe-dynamic-caption-plugin

As I have no experience with embedding 3rd party code, I asked ChatGPT for help. Photoswipe seems to load (but does not work), and according to devtools there seems to be an issue with that caption extension, here ChatGPT seems to have messed up.

Images have the class "img", 
Content has the class "gallery"
Images have Alt-Text which can be shown show as a caption.

`<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.2/photoswipe.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.2/photoswipe-dynamic-caption-plugin.css">

Sample project:
https://p-54962e37-c530-4297-8102-211f840524e6.apps.webstudio.is/?authToken=0113317e-ceea-4678-8a4f-a49e9898ab60&mode=preview

I'm trying to build a slider presentation site, based on your shared template. I turned off autoplay and changed the timing. Beside that, scripts + classes found in the template are unchanged.

Problem:
When I use image instances, the mobile swipe interaction becomes jerky. Often, it does not work at all – especially if you return to the tab after some idle time. If I instead use the same images as background images, the swipe interaction remains snappy and stable. As I want images indexed, I'd like to avoid bg-images.


Version with Image Instances (jerky)
https://apps.webstudio.is/builder/593e197c-b26d-404e-bf0a-d6d6a9b0ba80?authToken=660f3660-5cfd-455f-b030-5739d65b4ec7&mode=preview

https://swiper-solid-bg-bj8y0.wstd.io/

Version with Background images (fast)
https://apps.webstudio.is/builder/6119d4bf-cc80-473e-a55d-5fb08ee7b5ae?authToken=36cfb345-af7c-4197-8466-64b395196067&mode=preview

https://swiper-cleaner-fin-yzekk.wstd.io/

Here's an overpainted version with Titles moved closer to their inputs to emphasize that they belong together.

Grouping doesn't look ideal in sections with several stacked inputs. The Title currently sits a bit closer to the Input it belongs to, yet this to me does not look deliberate enough. 

The reason for the current choice is likely giving some breathing room for colour coded Input Titles, which is a valid concern, too.

Tried sharpening low contrast borders slightly, too.

Interested as well, in particular in using Notion as a CMS.

Generally curious how one handles such cases elegantly: WS as the tool to create page-templates, that also pulls in text and images and publishes them.

Notion or any proper CMS mostly as the authoring and cataloging tool.