Skip to content

Framework guide javascript documentation 2109 #12

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

Closed
kkindrai wants to merge 10 commits into from
Closed

Framework guide javascript documentation 2109 #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
ebfdbe1
Created Ionic Standalone Javascript Overview
kkindrai Jun 6, 2025
addf24c
Fixed link to components library
kkindrai Jun 6, 2025
8180de6
Renamed 'Standalone JavaScript' to 'Vanilla JavaScript'
kkindrai Jun 6, 2025
246f496
ADDITION: Turned the <script> tag into a standalone .css file
kkindrai Jun 26, 2025
73b10f9
Revert "ADDITION: Turned the <script> tag into a standalone .css file"
kkindrai Jun 26, 2025
5e88de5
docs(vanilla-javascript): add getting-started section and initial files
kkindrai Jun 26, 2025
4eb6dd9
docs(vanilla-javascript): add template material to your-first-app.md
kkindrai Jun 26, 2025
f5e008a
docs(vanilla-javascript): add template material to the 2-using-ionic-…
kkindrai Jun 26, 2025
afcdf81
docs(vanilla-javascript): add setup and usage instructions to your-fi…
kkindrai Jun 27, 2025
82c51d8
docs(vanilla-javascript): add using-ionic-components page
kkindrai Jun 27, 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
35 changes: 35 additions & 0 deletions docs/vanilla-javascript/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
---
title: 'Ionic Vanilla Javascript Overview'
sidebar_label: Overview
---

<head>
<title>Ionic Vanilla JavaScript Overview | Vanilla Javascript Documentation</title>
<meta
name="description"
content="Read this overview to learn how to incorporate Ionic in your Web Development projects, without installing any frameworks."
/>
</head>

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

`@ionic/core` brings the Ionic Experience to any project — no framework, no CLI.

## Ionic Framework CDN

Ionic Framework can be included from a CDN for quick testing in a [Plunker](https://plnkr.co/), [Codepen](https://codepen.io), or any other online code editor!

It's recommended to use [jsdelivr](https://www.jsdelivr.com/) to access the Framework from a CDN. To get the latest version, add the following inside the `<head>` element in an HTML file, or where external assets are included in the online code editor:

```html
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
```

The CSS bundle will include all of the Ionic [Global Stylesheets](../layout/global-stylesheets).


## Using Components
To use Ionic Components, you can browse our [UI Components Library](../components) and copy the `JavaScript` sample code. This code can then be modified for your purposes.
Loading
Loading