simple mode?

[dai-shi]

Thanks to some improvements, personally, I'm fairly comfortable with the current experience. But, it's a little bit hard for me to recommend it to others. (Especially, compared to stackblitz.) It's just my personal feeling and I think there's nothing wrong in livecodes. Still, I thought I should open this discussion.

There seems two aspects to overcome.

1. less is more
2. look & feel

I'm really bad at those things, and can't help much. But maybe something like "simple mode" might do.
For instance, I'm pretty happy with the simple design and limited capability provided by https://code.esm.sh/.

[hatemhosny]

Thank you @dai-shi . I really appreciate your constructive feedback.

The overall app design does need improvement indeed. Acknowledging that this is not an area I'm good at, I have opened an issue here asking for help.

I understand the request for a simple mode with limited features and less bloat.
Currently, there is a lite mode. Its main aim was to allow embedding a light-weight playground (e.g. for docs websites) with limited features, for basic demos without requiring large downloads. It has a very basic code editor with just syntax highlighting and no auto-complete. In addition in strips down most of the app features but retains the ability to compile any of the supported languages.

examples:
https://livecodes.io/?lite
https://livecodes.io/?lite&tsx
https://livecodes.io/?lite&template=react
https://livecodes.io/?lite&x=id/gu643572xh6

I have not revisited this for a while. Do you think using the monaco editor with this mode covers your use case?
What else can be improved?

I'm really grateful for you giving time to help improve LiveCodes.
Thank you.

[hatemhosny]

It won't load monaco so long as the query param contains editor=codemirror

You can save custom template from app menu -> save as -> template. Then app menu -> new -> my templates.
You can save 1 as a default template. It loads by default if you disable the Welcome screen, or can be loaded directly from the Welcome screen.

[hatemhosny]

That might be a hint for necessity for online help (tooltips?)

I agree there are some features that are not obvious.

Here are some ideas for later reference:

• I'll think about places for unobtrusive tooltips.
• Some quick tips on the loading screen.
• App tour
• A series of short videos to show off the features that might not be obvious.

[hatemhosny]

It feels like codemirror's vim mode is limited.

I'm using this:
https://github.com/replit/codemirror-vim

You may want to report the limitations there. This can be helpful to everybody.

[hatemhosny]

Now, I would like to create a custom template jotai.

Also note, since you don't mind just storing settings in URL, that you may combine share url with other params to act as a custom template

https://livecodes.io/?editorMode=vim&x=id/6257zmusg3e

[dai-shi]

yeah, I was thinking about it.

[dai-shi]

So, it feels like livecodes provides almost everything I need.
But, back to the original discussion, it's more is less.
I can configure it for myself, but can't let others to do so.
I will try to look for my best "queryParams", but still simple mode might be valuable.

• something very opinionated by the author
• something the first user can use without reading docs
• in that sense, please forget about vim mode, which is not for everyone.

[hatemhosny]

I agree. I will give it some thought.
Thank you.

[hatemhosny]

In case you find this useful, this is the default config:
https://github.com/live-codes/livecodes/blob/develop/src/livecodes/config/default-config.ts

[hatemhosny]

updated this issue (#539) to ask for help improving visual design and provide mock for UI to facilitate style edits.
Best designs will be included in LiveCodes as official themes.

Also posted on twitter: https://x.com/hatem_hosny_/status/1773104699941462361?s=20

[hatemhosny]

hi @dai-shi
This PR adds 2 new modes related to this discussion: focus and simple modes.
I would appreciate if you can have a look and let me know what you think.

The overall app design is still yet to be addressed.

[dai-shi]

Thanks. I will see what will happen with Jotai contributors.

[hatemhosny]

If you have no major comments, I will merge this and prepare a release after a few checks.
This should be ready by tomorrow.
I will let you know, in case you want to use a released version rather than the preview URL.
Thanks a lot for the helpful suggestions.

[dai-shi]

Sounds good.

[hatemhosny]

This is now released as v27 and is the current version running on livecodes.io

In addition, the SDK is also updated to v0.5 0 to use new configuration options.

Thank you.

[hatemhosny]

The UI is redesigned into a cleaner, more modern, more consistent and more accessible design.
In addition, the theme can be customised with custom color (which would be specially useful for embedded playgrounds)
The UI now also supports internationalization (translations for 12 UI languages)

See:
https://github.com/live-codes/livecodes/releases/tag/v36
https://blog.livecodes.io/livecodes-gets-a-fresh-look-and-goes-multilingual