Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WYSIWYG - REPL Demo needed. Tool that provides instant visual feedback preview of the output. #52

Open
sebacampos opened this issue May 19, 2021 · 4 comments
Labels
enhancement New feature or request good first issue Good for newcomers help wanted Extra attention is needed

Comments

@sebacampos
Copy link

sebacampos commented May 19, 2021

Is your feature request related to a problem? Please describe.

There's no way to build visually and live preview the output of what you're building unless you run the code...
There are the Build Methods but you need to run code, take the output of that, and go to Slack Block Kit Builder... or get the link via printPreviewUrl() and use that...
I think would be nice to have a WYSIWYG feature.

Describe the solution you'd like
A WYSIWYG REPL tool, similar to https://jsx-slack.netlify.app/ ?

Describe alternatives you've considered

Additional context

BTW, Thanks for building such an amazing tool! I love it! 🤩

@sebacampos sebacampos added the enhancement New feature or request label May 19, 2021
@raycharius
Copy link
Owner

Thanks for pushing this change! This is definitely something that I want to get to, but it will require some R&D to see how feasible it is going to be to host it on the website. It's built on docsify, and I'm not sure yet if it's possible to create such a page and host it there.

I'm a bit busy with a few other projects and finishing up Version 2, but if you want to collaborate on this and have the time to contribute, we can talk next steps!

@raycharius raycharius added good first issue Good for newcomers help wanted Extra attention is needed labels May 19, 2021
@zaini
Copy link
Contributor

zaini commented Jul 17, 2021

Created a DEMO of this here: http://old.zaini.me/slack-block-builder-viewer/

Is this sort of what you want? I definitely agree that something like this would be useful but I think the JSX syntax lends to an online editor more.

This demo will output the result of running .buildToJSON() on the given block. It will also include a link to the Slack Block Builder with the blocks inserted so you can view the design.

I could add variables but for now, I think this should get the idea across. I haven't looked into how jsx-slack deals with variables (if at all). Doesn't support all the blocks and stuff yet either.

Here are some features and things that could be done to improve this (because currently it sucks lol):

  • Nicer code editor and design for the actual site
  • Embed the result onto the page instead of having to click a button
  • create tests and actually make it something useable

@raycharius
Copy link
Owner

raycharius commented Jul 21, 2021

@zaini – nice! If you'd be up for collaborating on getting this production ready, would love to chat about how we can get this up and running! Are you a part of the Slack Community space?

@zaini
Copy link
Contributor

zaini commented Jul 21, 2021

Yeah would be interested collaborating on this. I'm not currently part of any Slack community spaces but please share wherever it would be best to chat about this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request good first issue Good for newcomers help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

3 participants