Skip to content

feat: add docs for svelte #6761

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
bobbor wants to merge 4 commits into
base: main
Choose a base branch
from
Open

feat: add docs for svelte #6761

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3ec59dc
feat: add docs for svelte
bobbor Nov 26, 2025
816e823
Create beige-coins-type.md
bobbor Nov 26, 2025
fe50d30
test: update snapshots
bobbor Nov 26, 2025
07d9c4a
chore: address review feedback
bobbor Nov 28, 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
5 changes: 5 additions & 0 deletions .changeset/beige-coins-type.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@aws-amplify/ui-docs": patch
---

feat: add docs for svelte
9 changes: 9 additions & 0 deletions docs/__tests__/__snapshots__/sitemap.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,15 @@ exports[`Sitemap Snapshot 1`] = `
/react/theming/responsive,
/react/theming/style-props,
/react/theming/theme-provider,
/svelte,
/svelte/connected-components/authenticator,
/svelte/connected-components/authenticator/advanced,
/svelte/connected-components/authenticator/configuration,
/svelte/connected-components/authenticator/customization,
/svelte/getting-started/accessibility,
/svelte/getting-started/installation,
/svelte/getting-started/introduction,
/svelte/getting-started/usage,
/swift,
/swift/connected-components/authenticator,
/swift/connected-components/authenticator/configuration,
Expand Down
195 changes: 101 additions & 94 deletions docs/src/components/FunctionOverridesTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,16 +26,21 @@ export const FunctionOverridesTable = ({ framework }) => {
}

const latestVersion = CURRENT_MAJOR_VERSIONS[framework].toString();
const amplify5FrameworkVersion = AMPLIFY_5_UI_VERSIONS[framework].toString();
const amplify5FrameworkVersion =
framework in AMPLIFY_5_UI_VERSIONS
? AMPLIFY_5_UI_VERSIONS[framework].toString()
: null;
return (
<Tabs.Container defaultValue={latestVersion}>
<Tabs.List>
<Tabs.Item value={latestVersion}>
<code>@aws-amplify/ui-{framework}</code> v{latestVersion} (latest)
</Tabs.Item>
<Tabs.Item value={amplify5FrameworkVersion}>
<code>@aws-amplify/ui-{framework}</code> v{amplify5FrameworkVersion}
</Tabs.Item>
{amplify5FrameworkVersion && (
<Tabs.Item value={amplify5FrameworkVersion}>
<code>@aws-amplify/ui-{framework}</code> v{amplify5FrameworkVersion}
</Tabs.Item>
)}
</Tabs.List>
<Tabs.Panel value={latestVersion}>
<ResponsiveTable labelWidth="10rem">
Expand Down Expand Up @@ -127,96 +132,98 @@ export const FunctionOverridesTable = ({ framework }) => {
</TableBody>
</ResponsiveTable>
</Tabs.Panel>
<Tabs.Panel value={amplify5FrameworkVersion}>
<ResponsiveTable labelWidth="10rem">
<TableHead>
<TableRow>
<TableCell as="th">Function Call</TableCell>
<TableCell as="th">Override Name</TableCell>
<TableCell as="th">formData Properties</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<ResponsiveTableCell label="Function Call">
<code>Auth.signUp</code>
</ResponsiveTableCell>
<ResponsiveTableCell label="Override Name">
<code>handleSignUp</code>
</ResponsiveTableCell>
<ResponsiveTableCell label="formData Properties">
<code>{'{username, password, attributes}'}</code>
</ResponsiveTableCell>
</TableRow>
<TableRow>
<ResponsiveTableCell label="Function Call">
<code>Auth.signIn</code>
</ResponsiveTableCell>
<ResponsiveTableCell label="Override Name">
<code>handleSignIn</code>
</ResponsiveTableCell>
<ResponsiveTableCell label="formData Properties">
<code>{'{username, password}'}</code>
</ResponsiveTableCell>
</TableRow>
<TableRow>
<ResponsiveTableCell label="Function Call">
<code>Auth.confirmSignIn</code>
</ResponsiveTableCell>
<ResponsiveTableCell label="Override Name">
<code>handleConfirmSignIn</code>
</ResponsiveTableCell>
<ResponsiveTableCell label="formData Properties">
<code>{'{user, code, mfaType}'}</code>
</ResponsiveTableCell>
</TableRow>
<TableRow>
<ResponsiveTableCell label="Function Call">
<code>Auth.confirmSignUp</code>
</ResponsiveTableCell>
<ResponsiveTableCell label="Override Name">
<code>handleConfirmSignUp</code>
</ResponsiveTableCell>
<ResponsiveTableCell label="formData Properties">
<code>{'{username, code}'}</code>
</ResponsiveTableCell>
</TableRow>
<TableRow>
<ResponsiveTableCell label="Function Call">
<code>Auth.resendSignUpCode</code>
</ResponsiveTableCell>
<ResponsiveTableCell label="Override Name">
<code>handleResendSignUpCode</code>
</ResponsiveTableCell>
<ResponsiveTableCell label="formData Properties">
<code>{'{username}'}</code>
</ResponsiveTableCell>
</TableRow>
<TableRow>
<ResponsiveTableCell label="Function Call">
<code>Auth.forgotPassword</code>
</ResponsiveTableCell>
<ResponsiveTableCell label="Override Name">
<code>handleForgotPassword</code>
</ResponsiveTableCell>
<ResponsiveTableCell label="formData Properties">
<code>{`{username}`}</code>
</ResponsiveTableCell>
</TableRow>
<TableRow>
<ResponsiveTableCell label="Function Call">
<code>Auth.forgotPasswordSubmit</code>
</ResponsiveTableCell>
<ResponsiveTableCell label="Override Name">
<code>handleForgotPasswordSubmit</code>
</ResponsiveTableCell>
<ResponsiveTableCell label="formData Properties">
<code>{'{username, code, password}'}</code>
</ResponsiveTableCell>
</TableRow>
</TableBody>
</ResponsiveTable>
</Tabs.Panel>
{amplify5FrameworkVersion && (
<Tabs.Panel value={amplify5FrameworkVersion}>
<ResponsiveTable labelWidth="10rem">
<TableHead>
<TableRow>
<TableCell as="th">Function Call</TableCell>
<TableCell as="th">Override Name</TableCell>
<TableCell as="th">formData Properties</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<ResponsiveTableCell label="Function Call">
<code>Auth.signUp</code>
</ResponsiveTableCell>
<ResponsiveTableCell label="Override Name">
<code>handleSignUp</code>
</ResponsiveTableCell>
<ResponsiveTableCell label="formData Properties">
<code>{'{username, password, attributes}'}</code>
</ResponsiveTableCell>
</TableRow>
<TableRow>
<ResponsiveTableCell label="Function Call">
<code>Auth.signIn</code>
</ResponsiveTableCell>
<ResponsiveTableCell label="Override Name">
<code>handleSignIn</code>
</ResponsiveTableCell>
<ResponsiveTableCell label="formData Properties">
<code>{'{username, password}'}</code>
</ResponsiveTableCell>
</TableRow>
<TableRow>
<ResponsiveTableCell label="Function Call">
<code>Auth.confirmSignIn</code>
</ResponsiveTableCell>
<ResponsiveTableCell label="Override Name">
<code>handleConfirmSignIn</code>
</ResponsiveTableCell>
<ResponsiveTableCell label="formData Properties">
<code>{'{user, code, mfaType}'}</code>
</ResponsiveTableCell>
</TableRow>
<TableRow>
<ResponsiveTableCell label="Function Call">
<code>Auth.confirmSignUp</code>
</ResponsiveTableCell>
<ResponsiveTableCell label="Override Name">
<code>handleConfirmSignUp</code>
</ResponsiveTableCell>
<ResponsiveTableCell label="formData Properties">
<code>{'{username, code}'}</code>
</ResponsiveTableCell>
</TableRow>
<TableRow>
<ResponsiveTableCell label="Function Call">
<code>Auth.resendSignUpCode</code>
</ResponsiveTableCell>
<ResponsiveTableCell label="Override Name">
<code>handleResendSignUpCode</code>
</ResponsiveTableCell>
<ResponsiveTableCell label="formData Properties">
<code>{'{username}'}</code>
</ResponsiveTableCell>
</TableRow>
<TableRow>
<ResponsiveTableCell label="Function Call">
<code>Auth.forgotPassword</code>
</ResponsiveTableCell>
<ResponsiveTableCell label="Override Name">
<code>handleForgotPassword</code>
</ResponsiveTableCell>
<ResponsiveTableCell label="formData Properties">
<code>{`{username}`}</code>
</ResponsiveTableCell>
</TableRow>
<TableRow>
<ResponsiveTableCell label="Function Call">
<code>Auth.forgotPasswordSubmit</code>
</ResponsiveTableCell>
<ResponsiveTableCell label="Override Name">
<code>handleForgotPasswordSubmit</code>
</ResponsiveTableCell>
<ResponsiveTableCell label="formData Properties">
<code>{'{username, code, password}'}</code>
</ResponsiveTableCell>
</TableRow>
</TableBody>
</ResponsiveTable>
</Tabs.Panel>
)}
</Tabs.Container>
);
};
28 changes: 17 additions & 11 deletions docs/src/components/Layout/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,26 @@
import * as React from 'react';
import { useRouter } from 'next/router';
import {
MdOutlineChecklist,
MdOutlineWidgets,
MdOutlineAutoAwesome,
MdWebAssetOff,
MdOutlineArticle,
MdOutlineAutoAwesome,
MdOutlineChecklist,
MdOutlinePower,
MdOutlineWidgets,
} from 'react-icons/md';
import {
Text,
Flex,
Collection,
Accordion,
Collection,
Flex,
Text,
useTheme,
} from '@aws-amplify/ui-react';
import {
ComponentNavItem,
connectedComponents,
guides,
theming,
gettingStarted,
guides,
primitiveComponents,
theming,
} from '../../data/links';

import NextLink from 'next/link';
Expand Down Expand Up @@ -142,11 +141,18 @@ const SecondaryNav = (props) => {
const isAndroid = platform === 'android';
const isSwift = platform === 'swift';
const isAngular = platform === 'angular';
const isSvelte = platform === 'svelte';
const isVue = platform === 'vue';

const hideTheming = isAndroid || isSwift;
const hideTheming = isAndroid || isSwift || isSvelte;
const hideGuidesExpander =
isFlutter || isReactNative || isAndroid || isSwift || isAngular || isVue;
isFlutter ||
isReactNative ||
isAndroid ||
isSwift ||
isAngular ||
isVue ||
isSvelte;

return (
<Accordion.Container value={value} onValueChange={setValue}>
Expand Down
26 changes: 26 additions & 0 deletions docs/src/components/Logo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,30 @@ export const VueLogo = (props) => (
</Icon>
);

export const SvelteLogo = (props) => (
<Icon {...props} viewBox={integrationViewbox}>
<g transform="scale(0.55) translate(5.00000000, 5.00000000)">
<path
fill="#FF3E00"
d="M91.8,15.6C80.9-0.1,59.2-4.7,43.6,5.2L16.1,22.8C8.6,27.5,3.4,35.2,1.9,43.9c-1.3,7.3-0.2,14.8,3.3,21.3
c-2.4,3.6-4,7.6-4.7,11.8c-1.6,8.9,0.5,18.1,5.7,25.4c11,15.7,32.6,20.3,48.2,10.4l27.5-17.5c7.5-4.7,12.7-12.4,14.2-21.1
c1.3-7.3,0.2-14.8-3.3-21.3c2.4-3.6,4-7.6,4.7-11.8C99.2,32.1,97.1,22.9,91.8,15.6"
/>
<path
fill="#FFFFFF"
d="M40.9,103.9c-8.9,2.3-18.2-1.2-23.4-8.7c-3.2-4.4-4.4-9.9-3.5-15.3c0.2-0.9,0.4-1.7,0.6-2.6l0.5-1.6l1.4,1
c3.3,2.4,6.9,4.2,10.8,5.4l1,0.3l-0.1,1c-0.1,1.4,0.3,2.9,1.1,4.1c1.6,2.3,4.4,3.4,7.1,2.7c0.6-0.2,1.2-0.4,1.7-0.7L65.5,72
c1.4-0.9,2.3-2.2,2.6-3.8c0.3-1.6-0.1-3.3-1-4.6c-1.6-2.3-4.4-3.3-7.1-2.6c-0.6,0.2-1.2,0.4-1.7,0.7l-10.5,6.7
c-1.7,1.1-3.6,1.9-5.6,2.4c-8.9,2.3-18.2-1.2-23.4-8.7c-3.1-4.4-4.4-9.9-3.4-15.3c0.9-5.2,4.1-9.9,8.6-12.7l27.5-17.5
c1.7-1.1,3.6-1.9,5.6-2.5c8.9-2.3,18.2,1.2,23.4,8.7c3.2,4.4,4.4,9.9,3.5,15.3c-0.2,0.9-0.4,1.7-0.7,2.6l-0.5,1.6l-1.4-1
c-3.3-2.4-6.9-4.2-10.8-5.4l-1-0.3l0.1-1c0.1-1.4-0.3-2.9-1.1-4.1c-1.6-2.3-4.4-3.3-7.1-2.6c-0.6,0.2-1.2,0.4-1.7,0.7L32.4,46.1
c-1.4,0.9-2.3,2.2-2.6,3.8s0.1,3.3,1,4.6c1.6,2.3,4.4,3.3,7.1,2.6c0.6-0.2,1.2-0.4,1.7-0.7l10.5-6.7c1.7-1.1,3.6-1.9,5.6-2.5
c8.9-2.3,18.2,1.2,23.4,8.7c3.2,4.4,4.4,9.9,3.5,15.3c-0.9,5.2-4.1,9.9-8.6,12.7l-27.5,17.5C44.8,102.5,42.9,103.3,40.9,103.9"
/>
</g>
</Icon>
);

export const FlutterLogo = (props) => (
<Icon
{...props}
Expand Down Expand Up @@ -127,6 +151,8 @@ export const FrameworkLogo = ({ framework, ...rest }) => {
return <AndroidLogo {...rest} />;
case 'swift':
return <SwiftLogo {...rest} />;
case 'svelte':
return <SvelteLogo {...rest} />;
default:
return <ReactLogo {...rest} />;
}
Expand Down
7 changes: 6 additions & 1 deletion docs/src/components/MigrationChanges/ForgotPasswordCallout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,12 @@ export const ForgotPasswordCallout = ({ framework }) => {
}

const isReactNative = framework === 'react-native';
const amplify5FrameworkVersion = AMPLIFY_5_UI_VERSIONS[framework];
let amplify5FrameworkVersion = null;
if (framework in AMPLIFY_5_UI_VERSIONS) {
amplify5FrameworkVersion = AMPLIFY_5_UI_VERSIONS[framework];
}

if (!amplify5FrameworkVersion) return null;

return (
<Alert
Expand Down
21 changes: 21 additions & 0 deletions docs/src/components/home/sections/AuthenticationSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,13 +132,33 @@ function App() {
}

export default App;
`,
svelte: `<script lang="ts">
import { Amplify } from 'aws-amplify';
import { Authenticator } from '@aws-amplify/ui-svelte'
import "@aws-amplify/ui-svelte/styles.css";
// on gen1
import awsconfig from './aws-exports';
// on gen2
import awsconfig from './amplify-output.json';

Amplify.configure(awsconfig);
</script>

<Authenticator>
{#snippet children({ user, signOut })}
<h1>Hello {user.username}!</h1>
<button onclick={signOut}>Sign Out</button>
{/snippet}
</Authenticator>
`,
};

const languages = {
react: 'jsx',
angular: 'javascript', // is this the best primsa language?
vue: 'javascript',
svelte: 'html',
flutter: 'dart',
'react-native': 'jsx',
};
Expand All @@ -147,6 +167,7 @@ const fileName = {
react: 'index.tsx',
angular: 'index.html',
vue: 'index.vue',
svelte: 'index.svelte',
flutter: 'main.dart',
'react-native': 'App.jsx',
};
Expand Down
Loading
Loading