diff --git a/src/BlazorAutoNet8/BlazorAutoNet8.Client/CodeExample.razor b/src/BlazorAutoNet8/BlazorAutoNet8.Client/CodeExample.razor
new file mode 100644
index 0000000..5026a30
--- /dev/null
+++ b/src/BlazorAutoNet8/BlazorAutoNet8.Client/CodeExample.razor
@@ -0,0 +1,23 @@
+@inject IJSRuntime JSRuntime
+@rendermode RenderMode.InteractiveWebAssembly
+
+
+
+ @Code
+
+
+
+@code {
+ [Parameter, EditorRequired] public string Code { get; set; } = default!;
+ [Parameter] public string Language { get; set; } = "razor";
+
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ await base.OnAfterRenderAsync(firstRender);
+
+ if (firstRender)
+ {
+ await JSRuntime.InvokeVoidAsync("Prism.highlightAll");
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/BlazorAutoNet8/BlazorAutoNet8.Client/InteractiveQRCode.razor b/src/BlazorAutoNet8/BlazorAutoNet8.Client/InteractiveQRCode.razor
new file mode 100644
index 0000000..9f8e5f2
--- /dev/null
+++ b/src/BlazorAutoNet8/BlazorAutoNet8.Client/InteractiveQRCode.razor
@@ -0,0 +1,30 @@
+@rendermode RenderMode.InteractiveWebAssembly
+
+
+
+
+
+ Change!
+
+
+
+
+@code {
+ string Data { get; set; } = ""This is a QR code of size 150px by 150px"";
+
+ void ChangeData()
+ {
+ Data = Guid.NewGuid().ToString();
+ }
+}")" />
+
+@code {
+ string Data { get; set; } = "This is a QR code of size 150px by 150px";
+
+ void ChangeData()
+ {
+ Data = Guid.NewGuid().ToString();
+ }
+}
diff --git a/src/BlazorAutoNet8/BlazorAutoNet8.Client/Pages/Counter.razor b/src/BlazorAutoNet8/BlazorAutoNet8.Client/Pages/Counter.razor
deleted file mode 100644
index a07e647..0000000
--- a/src/BlazorAutoNet8/BlazorAutoNet8.Client/Pages/Counter.razor
+++ /dev/null
@@ -1,27 +0,0 @@
-@page "/counter"
-@rendermode InteractiveAuto
-
-Counter
-
-
-
-
-
-
-
-
-
-
-
-
-
-@code {
- string Data { get; set; } = "This is an image, with target size of 256";
-
- void ChangeData()
- {
- Data = Guid.NewGuid().ToString();
- }
-}
\ No newline at end of file
diff --git a/src/BlazorAutoNet8/BlazorAutoNet8.Client/Pages/Playground.razor b/src/BlazorAutoNet8/BlazorAutoNet8.Client/Pages/Playground.razor
new file mode 100644
index 0000000..90d0c40
--- /dev/null
+++ b/src/BlazorAutoNet8/BlazorAutoNet8.Client/Pages/Playground.razor
@@ -0,0 +1,123 @@
+@page "/playground"
+@rendermode RenderMode.InteractiveWebAssembly
+
+Playground | PinguApps.Blazor.QRCode
+
+Playground
+
+
+ Changing the QR code requires an interactive rendering mode, and so this page is rendered using WASM.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ @foreach (var ecValue in Enum.GetValues(typeof(ErrorCorrection)))
+ {
+
+
+
+
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ Settings SettingsModel { get; set; } = new();
+
+ string Data { get; set; } = default!;
+ ErrorCorrection ErrorCorrection { get; set; }
+ string? Image { get; set; }
+ string Size { get; set; } = default!;
+ int PaddingCells { get; set; }
+ string ForeColor { get; set; } = default!;
+ string BackColor { get; set; } = default!;
+ string AriaDescription { get; set; } = default!;
+ string? Class { get; set; }
+ string? Id { get; set; }
+
+ protected override void OnInitialized()
+ {
+ base.OnInitialized();
+
+ UpdateQRCode();
+ }
+
+ void UpdateQRCode()
+ {
+ Data = SettingsModel.Data;
+ ErrorCorrection = SettingsModel.ErrorCorrection;
+ Image = SettingsModel.Image;
+ Size = SettingsModel.Size;
+ PaddingCells = SettingsModel.PaddingCells;
+ ForeColor = SettingsModel.ForeColor;
+ BackColor = SettingsModel.BackColor;
+ AriaDescription = SettingsModel.AriaDescription;
+ Class = SettingsModel.Class;
+ Id = SettingsModel.Id;
+ }
+
+ public class Settings
+ {
+ public string Data { get; set; } = "Welcome to the playground, where you are able to customise the QR code generated on this page to test the true capabilities of the library.";
+ public ErrorCorrection ErrorCorrection { get; set; } = ErrorCorrection.Quartile;
+ public string? Image { get; set; }
+ public string Size { get; set; } = "200px";
+ public int PaddingCells { get; set; } = 1;
+ public string ForeColor { get; set; } = "#000000";
+ public string BackColor { get; set; } = "#ffffff";
+ public string AriaDescription { get; set; } = "QR Code";
+ public string? Class { get; set; }
+ public string? Id { get; set; }
+ }
+}
\ No newline at end of file
diff --git a/src/BlazorAutoNet8/BlazorAutoNet8/Components/App.razor b/src/BlazorAutoNet8/BlazorAutoNet8/Components/App.razor
index 173a6b8..54eba68 100644
--- a/src/BlazorAutoNet8/BlazorAutoNet8/Components/App.razor
+++ b/src/BlazorAutoNet8/BlazorAutoNet8/Components/App.razor
@@ -9,12 +9,22 @@
+
+
+
+
+
+
+
+
+
+