Skip to content

docs(guide): add javascript section with overview and quickstart pages #4226

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.

Sign up for GitHub

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

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
+770 −0
Open

docs(guide): add javascript section with overview and quickstart pages #4226

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
747bdbe
docs(javascript): added overview and ionic-core page
joesphchang Jul 25, 2025
97cb601
docs(javascript): ran npm run lint
joesphchang Jul 31, 2025
16342aa
Merge branch 'main' into pr/4226
brandyscarney Sep 29, 2025
0d0e2ee
feat(javascript): update overview to match others and add JS logo
brandyscarney Sep 29, 2025
2139b34
refactor(javascript): move ionic-core to quickstart
brandyscarney Sep 29, 2025
3ed1139
refactor(javascript): update quickstart to match other framework flows
brandyscarney Sep 30, 2025
e5495eb
docs(javascript): update quickstart links and logos
brandyscarney Oct 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 77 additions & 0 deletions docs/javascript/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
---
title: 'Ionic JavaScript Overview'
sidebar_label: Overview
---

<head>
<title>Ionic JavaScript Overview | JavaScript Version Support and Tooling</title>
<meta
name="description"
content="@ionic/core combines the Ionic experience with the tooling and APIs tailored to JavaScript Developers. Learn more about version support in our JavaScript Overview."
/>
</head>

import DocsCard from '@components/global/DocsCard';
import DocsCards from '@components/global/DocsCards';

`@ionic/core` brings the full power of the Ionic Framework to JavaScript developers. It offers seamless integration with the JavaScript ecosystem, so you can build high-quality cross-platform apps using familiar JavaScript tools, components, and best practices. You also get access to Ionic's extensive UI library and native capabilities.

## JavaScript Version Support

Ionic Core supports the latest versions of JavaScript. For detailed information on supported JavaScript runtime versions, see the [Stencil Support Policy](https://stenciljs.com/docs/support-policy#javascript-runtime).

## JavaScript Tooling

Ionic Core works seamlessly with modern JavaScript tooling and build systems. You can use popular tools like Vite, Webpack, or Parcel to scaffold and build your apps. Ionic Core is designed to fit naturally into the JavaScript ecosystem, so you can use your favorite libraries for state management, testing, and more.

## Native Tooling

[Capacitor](https://capacitorjs.com) is the official cross-platform runtime for Ionic Core, enabling your apps to run natively on iOS, Android, and the web with a single codebase.

## Installation

Before you begin, make sure you have [Node.js](https://nodejs.org/) (which includes npm) installed on your machine.

```shell-session
$ npm create vite@latest my-app -- --template vanilla
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The app is named my-app here instead of myApp like the other frameworks because it will prompt for the name again if you don't use kebab case.


$ cd my-app
$ npm install && npm install @ionic/core
$ npm run dev █
```

## Resources

<DocsCards>

<DocsCard header="Getting Started" href="quickstart" icon="/icons/guide-quickstart-icon.png">
<p>Quickly set up your first Ionic JavaScript app and learn the basics of the framework and CLI.</p>
</DocsCard>

<DocsCard
header="JavaScript Documentation"
href="https://developer.mozilla.org/en-US/docs/Web/JavaScript"
icon="/icons/logo-javascript-icon.png"
>
<p>
Learn more about JavaScript's core concepts, tools, and best practices from the official JavaScript documentation.
</p>
</DocsCard>

<DocsCard header="Navigation" href="/docs/api/router" icon="/icons/component-navigation-icon.png">
<p>Discover how to handle routing and navigation in Ionic JavaScript apps using the Ionic Router.</p>
</DocsCard>

<DocsCard header="Components" href="/docs/components" icon="/icons/guide-components-icon.png">
<p>Explore Ionic's rich library of UI components for building beautiful apps.</p>
</DocsCard>

<DocsCard header="Theming" href="/docs/theming/basics" icon="/icons/guide-theming-icon.png">
<p>Learn how to customize the look and feel of your app with Ionic's powerful theming system.</p>
</DocsCard>

<DocsCard header="Capacitor Documentation" href="https://capacitorjs.com/docs/" icon="/icons/guide-capacitor-icon.png">
<p>Explore how to access native device features and deploy your app to iOS, Android, and the web with Capacitor.</p>
</DocsCard>

</DocsCards>
Loading