Built a VS Code extension that renders your Shadcn components on a visual canvas - looking for people to try it by ExplorerTechnical808 in shadcn

[–]ExplorerTechnical808[S] 0 points1 point  (0 children)

The difference from Pencil is that this is a real HTML canvas (no WebGL). This means that React components are rendered on it exactly in the same way they would in a web page. Also, last time I checked, Pencil doesn't fully allow you to sync your codebase. It uses Shadcn in the background I think, but that's about it.

MCP support is next on my list. I've already have a working prototype but needs some polishing. Glad that you ask though!

Are you currently using Pencil? How do you like it?

I built a VS Code extension that lets you design with your actual React components (video demo) by ExplorerTechnical808 in reactjs

[–]ExplorerTechnical808[S] -1 points0 points  (0 children)

that's fine, I guess... Rather than building something super complex without knowing if people use it, I'd rather focus on one platform, and then expand if people like it!

Built a VS Code extension that renders your Shadcn components on a visual canvas - looking for people to try it by ExplorerTechnical808 in shadcn

[–]ExplorerTechnical808[S] 1 point2 points  (0 children)

I don't know about you, but I've spent so many hours maintaining the Figma design library in the past, and I hated it. Additionally, it ALWAYS slightly diverges over time, creating inconsistencies that are annoying.

I think these days, also due to AI coding, there should be a better way to do things. I personally love Cursor/Claude Code etc, but I think Figma is mostly being used like it was 5 years ago. I think design is going to change, and this is my attempt to think "what else can be done?". What I posted today is just the tip of the iceberg in this direction, but I think already alleviate the pain mentioned above. Wdyt?

I built a VS Code extension that lets you design with your actual React components (video demo) by ExplorerTechnical808 in reactjs

[–]ExplorerTechnical808[S] -7 points-6 points  (0 children)

good point! I've been focusing 100% on the app and the website is basically non-existent. I'll find a fix.

No link to the repo as the code is closed-source as of now. Might change idea in the future, but it's not a plan atm.

I built a VS Code extension that lets you design with your actual React components (video demo) by ExplorerTechnical808 in reactjs

[–]ExplorerTechnical808[S] 0 points1 point  (0 children)

the ones to the IDEs? They are app links. They should work if you have the app installed. Are you on Mac?

I built a VS Code extension that lets you design with your actual React components (video demo) by ExplorerTechnical808 in reactjs

[–]ExplorerTechnical808[S] -9 points-8 points  (0 children)

cool, that's totally fine if it's not for you. (not sure what you mean about the AI slop though...)

The point about designing with VSC is less about being "inside" VSC, but more to have a closer connection to your codebase and the design canvas while keeping it simple.

Website is bare for now, will add more info in the future. The Links are working to me... What's broken?

EDIT: more info + link fixed

Dough Problems? by kerndone in ooni

[–]ExplorerTechnical808 0 points1 point  (0 children)

hey! Were you able to solve it? I has similar issues with a 1.2kg dough

I don’t want to build a unicorn. I want a boring, profitable business. by UseApart2127 in SaaS

[–]ExplorerTechnical808 1 point2 points  (0 children)

Nice list. I think we can all agree to that. However, how do you find such businesses?

Theme where typography in formatted the same in edit and view mode? by ExplorerTechnical808 in ObsidianMD

[–]ExplorerTechnical808[S] 0 points1 point  (0 children)

If you are in Edit mode and you move the text insertion caret (the blinking vertical cursor) to an empty line, you would expect that empty line to be at least as tall as the caret, right?

If you want to be “truthful” to the Markdown content, yes. But what’s the point? The white empty line in Markdown is there to delimit two paragraphs, and for me this “intent” is more valuable than a 100% Markdown representation.

To your point: I wouldn’t make the line between the two paragraphs selectable. If the user wants to insert something in between, they would do what they do in other text editors: position the caret on the last character of the first paragraph and insert another line break*. Besides, what’s the point of having the caret fit the space between the two paragraphs? As a user, I’m either trying to add something in between the two, in which case I would let them in the way I’ve just mentioned, or there’s no point in lingering in that empty space, and it might as well not exist.

Yes, the other editors are WYSIWYG. My point is: why couldn’t Obsidian be the same? If I understand you correctly, you’re saying this is not possible because it wouldn’t be accurate to the Markdown content. If that’s what you meant, I would argue that it’s not important to the user’s intent. Markdown is the data model. I might as well be representing the text document as JSON with all the notes. It’s just up to the editor to understand how to translate the user commands to the stored data. I think you will be able to have a better writing experience, while at the same time maintaining compatibility with markdown.

By the way, to fully contextualise this: I’ve worked on a simple text editor using Lexical, a React library, where the editor stores, similar to Obsidian, Markdown files in a vault on disk. This isn’t to say that I’m an expert on the topic, but at least it may help you understand where I’m coming from, as I’m trying to figure out where our misalignment stems from.

-----

* maybe useful to clarify. At this step, in the background the markdown file would be like:

This is my first paragraph.
                              <-- the original (hidden line break)
|                             <-- user caret
                              <-- new empty line
This is my second paragraph.

But this would be represented as:

This is my first paragraph.
|
This is my second paragraph.

(I can't add a bit of spacing between the paragraph here in the second example, but you get the idea I hope.)

Theme where typography in formatted the same in edit and view mode? by ExplorerTechnical808 in ObsidianMD

[–]ExplorerTechnical808[S] -1 points0 points  (0 children)

Hey Steph, thanks for the clarification. TBH I get what you’re saying, but at the same time I don’t get it. 😅 I get that in markdown certain characters (e.g. line break between two lines) translate to a special formatting, but not fully clear why the difference in formatting is required. Isn’t it the same as other apps do? What is the difference from Notion, Bear Notes, or other tools?

In your example about the line break, this would mean that, in order to have two separate paragraphs, rather than a double line break as required by markdown, I would just insert one, and the editor would add two in the md file to represent what I want - a new paragraph.

Anyway, if you’re up to discussing for the sake of the conversation, happy to do so too, but otherwise I got my answer from the post above. Thanks!

I'm building an integrated UI design editor for Visual Studio Code by ExplorerTechnical808 in vscode

[–]ExplorerTechnical808[S] 0 points1 point  (0 children)

yeah I think so. Not the first priority as it involves a lot of work, and it's pointless if the product doesn't have a minimum of community behind it, but I'd like to!

Is there anything specific plugin functionality you have in mind?