diff --git a/components/chart/overview.md b/components/chart/overview.md
index 90a49ef7d..15e8ce8a3 100644
--- a/components/chart/overview.md
+++ b/components/chart/overview.md
@@ -24,50 +24,8 @@ The <a href="https://demos.telerik.com/blazor-ui/chart/overview" target="_blank"
 
 >caption Basic chart
 
-````RAZOR
-<TelerikChart>
-	<ChartSeriesItems>
-		<ChartSeries Type="ChartSeriesType.Line" Name="Product 1 (bound to simple data)" Data="@simpleData">
-		</ChartSeries>
-		<ChartSeries Type="ChartSeriesType.Line" Name="Product 2 (bound to model)" Data="@modelData" Field="@nameof(MyDataModel.SecondSeriesValue)">
-			<ChartSeriesLabels Template="#=value# in #=dataItem.ExtraData# quarter" Visible="true"></ChartSeriesLabels>
-		</ChartSeries>
-	</ChartSeriesItems>
-
-	<ChartValueAxes>
-		<ChartValueAxis Color="red"></ChartValueAxis>
-	</ChartValueAxes>
-
-	<ChartCategoryAxes>
-		<ChartCategoryAxis Categories="@xAxisItems"></ChartCategoryAxis>
-	</ChartCategoryAxes>
-
-	<ChartTitle Text="Quarterly sales trend"></ChartTitle>
-
-	<ChartLegend Position="Telerik.Blazor.ChartLegendPosition.Bottom">
-	</ChartLegend>
-</TelerikChart>
-
-@code {
-	public class MyDataModel
-	{
-		public int SecondSeriesValue { get; set; }
-		public string ExtraData { get; set; }
-	}
-
-	public List<MyDataModel> modelData = new List<MyDataModel>()
-	{
-		new MyDataModel() { SecondSeriesValue = 1, ExtraData = "first" },
-		new MyDataModel() { SecondSeriesValue = 5, ExtraData = "second" },
-		new MyDataModel() { SecondSeriesValue = 3, ExtraData = "third" },
-		new MyDataModel() { SecondSeriesValue = 2, ExtraData = "fourth" },
-	};
 
-	public List<object> simpleData = new List<object>() { 10, 2, 7, 5 };
-
-	public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" };
-}
-````
+<demo metaUrl="client/chart/overview/" height="500"></demo>
 
 ## Chart Elements
 
@@ -252,16 +210,10 @@ To execute Chart methods, obtain reference to the component instance via `@ref`.
 | `Refresh` | Use the method to programmatically re-render the Chart.  |
 | `ResetDrilldownLevel` | Use the method to programmatically reset the drilldown level of the Chart. For more information refer to the [DrillDown article](slug:chart-drilldown#reset-drilldown-level). |
 
-<div class="skip-repl"></div>
-
-````RAZOR
-<TelerikButton OnClick="@RefreshChart">Refresh Chart</TelerikButton>
-
-<TelerikChart @ref="ChartRef" />
+````RAZOR.skip-repl
+<TelerikChart @ref="@ChartRef" />
 
 @code {
-	public TelerikChart ChartRef;
-
 	private void RefreshChart()
 	{
 		ChartRef.Refresh();
diff --git a/components/grid/overview.md b/components/grid/overview.md
index ff65765d9..5f20acc17 100644
--- a/components/grid/overview.md
+++ b/components/grid/overview.md
@@ -29,56 +29,7 @@ The Telerik Blazor grid is built on native Blazor from the ground up, by a compa
 
 >caption Get started with the Blazor Grid
 
-````RAZOR
-@* Telerik Blazor Grid with some common features *@
-
-<TelerikGrid Data="@GridData"
-             Pageable="true"
-             Sortable="true"
-             FilterMode="@GridFilterMode.FilterRow">
-    <GridColumns>
-        <GridColumn Field="Name" Title="Product Name" />
-        <GridColumn Field="Price" DisplayFormat="{0:C2}" />
-        <GridColumn Field="@nameof(Product.Released)" DisplayFormat="{0:D}" />
-        <GridColumn Field="@nameof(Product.Discontinued)" />
-    </GridColumns>
-</TelerikGrid>
-
-@code {
-    private List<Product> GridData { get; set; }
-
-    protected override void OnInitialized()
-    {
-        GridData = new List<Product>();
-
-        var rnd = new Random();
-
-        for (int i = 1; i <= 30; i++)
-        {
-            GridData.Add(new Product
-            {
-                Id = i,
-                Name = "Product name " + i,
-                Price = (decimal)(rnd.Next(1, 50) * 3.14),
-                Released = DateTime.Now.AddDays(-rnd.Next(1, 365)).AddYears(-rnd.Next(1, 10)).Date,
-                Discontinued = i % 5 == 0
-            });
-
-        }
-
-        base.OnInitialized();
-    }
-
-    public class Product
-    {
-        public int Id { get; set; }
-        public string Name { get; set; }
-        public decimal Price { get; set; }
-        public DateTime Released { get; set; }
-        public bool Discontinued { get; set; }
-    }
-}
-````
+<demo metaUrl="client/grid/overview/" height="555"></demo>
 
 ## Blazor Grid Video Tutorial
 
@@ -186,41 +137,7 @@ To execute these methods, obtain reference to the Grid instance via `@ref`.
 
 >caption How to obtain a Grid reference and call methods
 
-````RAZOR
-<TelerikButton OnClick="@AutoFit">Autofit All Columns</TelerikButton>
-
-<TelerikGrid @ref="TheGrid"
-             Data="@GridData"
-             Width="600px">
-    <GridColumns>
-        <GridColumn Field="@(nameof(GridModel.Id))" />
-        <GridColumn Field="@(nameof(GridModel.Text))" Width="300px" />
-    </GridColumns>
-</TelerikGrid>
-
-@code {
-    private TelerikGrid<GridModel> TheGrid { get; set; }
-
-    private async Task AutoFit()
-    {
-        await TheGrid.AutoFitAllColumnsAsync();
-    }
-
-    private IEnumerable<GridModel> GridData = Enumerable.Range(1, 5)
-        .Select(x => new GridModel
-            {
-                Id = x,
-                Text = "some longer text here that will not fit on a single line and we would like to expand it " + x
-            });
-
-    public class GridModel
-    {
-        public int Id { get; set; }
-        public string Text { get; set; }
-    }
-}
-````
-
+<demo metaUrl="client/grid/overview-ref/" height="450"></demo>
 
 ## Next Steps