docs

docs/docs/features/index.md

@@ -8,7 +8,7 @@ sidebar_class_name: exclude_from_sidebar
 
 _LiveCodes_ is an open-source, client-side, code playground that runs in the browser. It enables quick prototyping and experimenting with a wide variety of [technologies](../languages/) (including 80+ languages, frameworks and processors) without having to manually setup a development environment for each. The [result](./result.md) is displayed as a regular web page. The rapid feedback of previewing the result page without waiting for build steps significantly boosts productivity.
 
-![LiveCodes screenshot](../../static/img/screenshots/react-template.png)
+![LiveCodes screenshot](../../static/img/screenshots/features.jpg)
 
 In this page, a quick overview of the important features are presented. A more detailed description of each feature is described in the following sections.
 
@@ -18,19 +18,19 @@ The default code editor is the powerful editor that powers [VS Code](https://cod
 
 ## Mobile-friendly
 
-The responsive layout allows working on devices with different screen sizes. On mobile, a lighter-weight touch-friendly code editor (Code Mirror 6) is used, so that you can experiment your ideas on the go.
+The responsive layout allows working on devices with different screen sizes. On mobile, a lighter-weight touch-friendly code editor (CodeMirror 6) is used, so that you can experiment your ideas on the go.
 
-## External code/libraries
+## External Code/Libraries
 
-[External scripts/stylesheets](./external-resources.md) can be added to the web page. There is a UI screen that helps you search for and add NPM libraries and google fonts. Moreover, [NPM modules can be imported](./module-resolution.md) without having to do any `npm install`s.
+[External scripts/stylesheets](./external-resources.md) can be added to the web page. There is a UI screen that helps you search for and add NPM libraries and google fonts. Moreover, [NPM modules can be imported](./module-resolution.md) without the need for any `npm install`s.
 
 ## Import and Code Pre-fill
 
 Code can be [imported](./import.md) from a variety of sources including GitHub gist, GitHub file, directory in a GitHub repo, Gitlab snippet, Gitlab file, directory in a Gitlab repo, JS Bin, raw code, code in web page DOM and code in zip file. You can also [pre-fill code](./code-prefill.md) using various ways.
 
 ## Share/Export
 
-Projects can be easily [shared](./share.md) as URLs or QR codes. In addition, you may export any project as HTML, JSON or zip file containing source code files. You may also export to other services like GitHub gists, CodePen or JSFiddle.
+Projects can be easily [shared](./share.md) as URLs or QR codes. In addition, you may [export](./export.md) any project as HTML, JSON or zip file containing source code files. You may also export to other services like GitHub gists, CodePen or JSFiddle.
 
 ## Embed
 
@@ -44,6 +44,8 @@ Projects can be [deployed](./deploy.md) to public URLs that can be shared with o
 
 A large number of [starter templates](./templates.md) are available. They can be used to get you started with most of the supported technologies.
 
+![Starter templates](../../static/img/screenshots/templates1.png)
+
 ## Assets
 
 Your own local assets (e.g. images, icons, fonts, local scripts and stylesheets) can be added to the app and then used in any project. The assets are made available even when the projects are shared, exported or deployed.
@@ -66,10 +68,7 @@ LiveCodes runs in the browser, where all the processing/transpilation occurs, wi
 
 ## Developer-friendly
 
-LiveCodes makes it easy to [get started](../getting-started). It is highly [configurable](../configuration). Lots of features can be
-configured by URL [query params](../configuration/query-params). The [SDK](../sdk/) facilitates [embedding](./embeds.md)
-playgrounds and allows easy [communication](../sdk/js-ts#sdk-methods) with
-them. The SDK is available for use in [JS/TS](../sdk/js-ts.md), [React](../sdk/react.md) [Vue](../sdk/vue.md) and [Svelte](../sdk/svelte.md).
+LiveCodes makes it easy to [get started](../getting-started). It is highly [configurable](../configuration). Lots of features can be configured by URL [query params](../configuration/query-params). The [SDK](../sdk/) facilitates [embedding](./embeds.md) playgrounds and allows easy [communication](../sdk/js-ts#sdk-methods) with them. The SDK is available for use in [JS/TS](../sdk/js-ts.md), [React](../sdk/react.md) [Vue](../sdk/vue.md) and [Svelte](../sdk/svelte.md).
 
 ## Comprehensive Documentations
 

docs/docs/features/intellisense.md

@@ -1,4 +1,4 @@
-# Intellisense
+# IntelliSense
 
 import LiveCodes from '../../src/components/LiveCodes.tsx';
 

docs/docs/why.md

@@ -8,42 +8,42 @@ There are great products like [CodePen](https://codepen.io/), [JSFiddle](https:/
 
 Currently, there are 80+ languages/frameworks supported. These include:
 
-- Web languages (HTML, CSS & JavaScript)
-- Syntax used by web libraries/frameworks (e.g. JSX, TSX, Vue SFC, Svelte SFC, MDX, Astro).
+- Web languages (HTML, CSS & JavaScript).
+- Web frameworks/libraries (e.g. React JSX/TSX, Vue SFC, Svelte SFC, Solid, MDX, Astro).
 - Languages that transpile to JavaScript (e.g. TypeScript, CoffeeScript, LiveScript, ReScript).
 - Languages/frameworks that generate CSS (e.g. SCSS, Less, Stylus, Tailwind CSS, UnoCSS).
-- CSS processors (e.g. PostCSS, Autoprefixer, Lightning CSS, CSS Modules, cssnano)
+- CSS processors (e.g. PostCSS, Autoprefixer, Lightning CSS, CSS Modules, cssnano).
 - Traditional programming languages (e.g. Python, Ruby, Go, PHP, C++, R, Lua, Scheme, Perl).
 - Data manipulation/logic languages (e.g. SQL, Prolog).
 - Authoring/templating languages (e.g Markdown, AsciiDoc, Pug, Handlebars, Haml).
 - Low-code/visual editors (e.g. blockly, rich text editor).
 - Modeling languages/diagram-as-code (e.g. Gnuplot, Graphviz, Mermaid, Vega, Plotly).
-- Languages that target WebAssembly (e.g. AssemblyScript, WebAssembly Text Format)
-- ... and others.
+- Languages that target WebAssembly (e.g. AssemblyScript, WebAssembly Text Format).
+- ... and many more.
 
 For a full list check the [Languages](./languages/index.md) section.
 
 Generally, if you are a developer (or want to be one), there is a big chance you will find something interesting to do with LiveCodes.
 
 ### Client-Side!
 
-All processing and code transformations run in the browser on the client-side. After the initial load, using the app becomes significantly faster without having to wait for server rounds. Lazy-loading is heavily used, so that only parts of the app required for the selected languages/features are downloaded.
+All processing and code transformations run in the browser on the client-side. After the initial load, the app gets significantly faster without having to wait for server rounds. Lazy-loading is heavily used. Only parts of the app required for the selected languages/features are downloaded.
 
 The code you write in LiveCodes does not leave your computer. All projects are private unless you choose to share/export/deploy them.
 
 Being a client-side app allows it to be hosted on any static file server or CDN, which removes the high requirements needed by other alternatives (like server storage or memory). This makes LiveCodes available for a large number of developers without requiring them to pay for servers, so it can stay free with unlimited usage 😊.
 
 ### Developer Tool
 
-LiveCodes aims to be a feature-rich, easy to use playground that can be used for prototyping and education. The other main goal (in fact, that was the motive for its development), is to allow library developers to use it for documentation of their libraries and showcase their products. This can be achieved by [embedding playgrounds](./features/embeds.md) in blogs, tutorials, documentation and educational websites. In addition, private (unpublished) modules can be imported with editor auto-completion and [intellisense](./features/intellisense.md).
+LiveCodes aims to be a feature-rich, easy to use playground that can be used for prototyping and education. The other main goal (in fact, that was the motive for its development), is to allow library developers to use it for documentation of their libraries and showcase their products. This can be achieved by [embedding playgrounds](./features/embeds.md) in blogs, tutorials, documentation and educational websites. In addition, private (unpublished) modules can be imported with editor auto-completion and [IntelliSense](./features/intellisense.md).
 
 That can be done using the official app ([livecodes.io](https://livecodes.io)), or as a [self-hosted](./features/self-hosting.md) option. Again, being a client-side-only app, LiveCodes becomes more convenient for not needing special server requirements, while features like export and deploy are provided by APIs of external services.
 
 LiveCodes does NOT aim to be a social coding platform. It will stay as a backendless developer tool. Other platforms are already doing a great job in this regards.
 
 ### Build-Free Development Environment
 
-LiveCodes provides many of the tools you may already be using. These include Monaco editor (that powers [VS Code](https://code.visualstudio.com/)), [Prettier](https://prettier.io/), [Emmet](https://emmet.io/), [Babel](https://babeljs.io/), [TypeScript](https://www.typescriptlang.org/), [SCSS](https://sass-lang.com/), [Less](https://lesscss.org/), [PostCSS](https://postcss.org/), [Jest](https://jestjs.io/) and [Testing Library](https://testing-library.com/), among others. [NPM modules](./features/module-resolution.md) can be imported as usual. All that run seamlessly in the browser without any explicit build step. It feels like a very light-weight version of your own local development environment with the keyboard shortcuts, intellisense and code navigation features.
+LiveCodes provides many of the tools you may already be using. These include Monaco editor (that powers [VS Code](https://code.visualstudio.com/)), [Prettier](https://prettier.io/), [Emmet](https://emmet.io/), [Babel](https://babeljs.io/), [TypeScript](https://www.typescriptlang.org/), [SCSS](https://sass-lang.com/), [Less](https://lesscss.org/), [PostCSS](https://postcss.org/), [Jest](https://jestjs.io/) and [Testing Library](https://testing-library.com/), among others. [NPM modules](./features/module-resolution.md) can be imported as usual. All these tools run seamlessly in the browser without any explicit build step. It feels like a very light-weight version of your own local development environment with the keyboard shortcuts, IntelliSense and code navigation features.
 
 It just works™ without having to `npm install` anything. Not even on the server (because there is no server!).
 
@@ -69,7 +69,7 @@ Please consider [sponsoring LiveCodes](./sponsor.md) if you find it useful, to s
 
 :::caution Under Development
 
-Please note that LiveCodes is still in active development and may not yet be ready for production use. API may change, and performance improvements may still be required. However please take the time to try it. Use [permanent URL](./features/permanent-url.md) and pinned [library version](./sdk/) to avoid breaking changes. Your feedback and contribution are highly appreciated.
+LiveCodes is currently in **public beta**. It is in active development. However, please take the time to try it. Use [permanent URL](./features/permanent-url.md) and pinned [library version](./sdk/) to avoid breaking changes. Your feedback and contribution are highly appreciated.
 
 :::
 

docs/src/components/RunInLiveCodes.tsx

@@ -61,6 +61,7 @@ export default function RunInLiveCodes(props: {
           aria-hidden="true"
           viewBox="0 0 24 24"
           className="iconExternalLink_node_modules-@docusaurus-theme-classic-lib-theme-Icon-ExternalLink-styles-module"
+          style={{ marginLeft: '4px' }}
         >
           <path
             fill="currentColor"